组合选择器 

组合器是解释选择器之间关系的某种机制。
    CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。

    CSS 中有四种不同的组合器：

    后代选择器 (空格)
    子选择器 (>)
    相邻兄弟选择器 (+)
    通用兄弟选择器 (~)

（1）后代选择器 (空格)
css：
/*后代选择器：后代选择器匹配属于指定元素后代的所有元素*/
body p{
    background-color: red;
}
html：
<body>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>

<ul>
    <li>第一列<p> 列表中的段落</p></li>
    <li><p>曾孙子级别的P元素</p></li>
    <li>第三列</li>
</ul>

<p>第四个段落</p>
<p>第五个段落</p>
<p>第六个段落</p>
</body>

效果：

 

 



（2）子选择器 (>)

css：
/*子选择器：子选择器匹配属于指定元素子元素的所有元素。(只到子级元素，孙子不在范围)*/
/*body标签中的所有子元素P。(只到子级元素，孙子不在范围)*/
body > p{
    background-color: red;
}
html:
<body>

<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<ul>
    <li>第一列<p> 列表中的段落</p></li>
    <li>第二列</li>
    <li>第三列</li>
</ul>

<p>第四个段落</p>
<p>第五个段落</p>
<p>第六个段落</p>
</body>
效果：

 

 




（3）相邻兄弟选择器：
css：
/*相邻兄弟选择器：相邻兄弟选择器匹配所有作为指定元素的
相邻同级的元素。(选择ul后面的第一个P)*/
ul + p{
    background-color: yellowgreen;
}

html：
<ul>
    <li>第一列<p> 列表中的段落</p></li>
    <li>第二列</li>
    <li>第三列</li>
</ul>

<p>第四个段落</p>
<p>第五个段落</p>
<p>第六个段落</p>

效果：

 

 




（4）通用兄弟选择器
css：
/*通用兄弟选择器：匹配属于指定元素后面的同级元素的所有元素。*/
ul ~ p{
    background-color: gold;
}
html代码

<ul>
    <li>第一列<p> 列表中的段落</p></li>
    <li>第二列</li>
    <li>第三列</li>
</ul>

<p>第四个段落</p>
<p>第五个段落</p>
<p>第六个段落</p>

 

posted @ 2023-01-17 13:15  😂😂幺力儿园毕业😂😂  阅读(82)  评论(0)    收藏  举报