<div class="gradefather"> hello1
<div class="father">hello2
<p class="son">hello4</p>
</div>
<p>hello3</p>
<p>hello5</p>
</div>
一、A,B :任意选择器 A or B
div,p { #所有div或者p标签
font-size:10px;
color:blue;
}
二、A B:后代选择器,A 标签下的所有B
div p { #div下所有p标签
font-size:20px;
color:green;
}
三、A>B:子选择器,仅仅儿子级别会选中.
gradefather>p {#gradefather的子标签,仅hello3 hello5 会作用
font-size:20px;
color:red;
}
.father>p {#father的子标签,仅hello4 会作用
font-size:20px;
color:red;
}
四、A+B:毗邻选择器,仅仅相邻的同级别(兄弟sibling)第一个会选中.
father+p { #father的第一个邻居,仅仅hello3会作用
font-size:20px;
color:green;
}
注意:
1、块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。块级标签默认占一行,内联标签占内容大小的空间。
2、有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
3、li内可以包含div
4、块级元素与块级元素并列、内联元素与内联元素并列。