CSS快速入门-组合选择器

作者：@skyflask
转载本文请注明出处：https://www.cnblogs.com/skyflask/p/8678979.html

---

目录

一、A，B :任意选择器 A or B
二、A B：后代选择器，A 标签下的所有B
三、A>B：子选择器,仅仅儿子级别会选中.
四、A+B：毗邻选择器，仅仅相邻的同级别（兄弟sibling）第一个会选中.

<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、块级元素与块级元素并列、内联元素与内联元素并列。