建設(shè)網(wǎng)站的公司興田德潤(rùn)怎么聯(lián)系北京企業(yè)網(wǎng)站seo平臺(tái)
組合器是解釋選擇器之間關(guān)系的某種機(jī)制。在簡(jiǎn)單選擇器器之間，可以包含一個(gè)組合器，從而實(shí)現(xiàn)簡(jiǎn)單選擇器難以達(dá)到的效果。
CSS 中有四種組合器：
-
后代選擇器 (空格)：匹配屬于指定元素后代的所有元素，示例：div p 選擇div元素后代中的p，包括它的子孫十八代
-
子選擇器 (>) ：指定元素子元素的所有元素。div > p，選擇div元素下的子元素，只包括子元素
-
相鄰兄弟選擇器 (+) ：相鄰兄弟選擇器匹配所有作為指定元素的相鄰?fù)?jí)的元素。兄弟（同級(jí)）元素必須具有相同的父元素，“相鄰”的意思是“緊隨其后”
-
通用兄弟選擇器 (~)：通用兄弟選擇器匹配屬于指定元素的同級(jí)元素的所有元素
1、后代選擇器 (空格)
匹配屬于指定元素后代的所有元素，示例：div p 選擇div元素后代中的p，包括它的子孫十八代
代碼：
<style>
div p {background-color: yellow;
}
</style>
</head>
<body><div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>
后代選擇器選擇的元素的所有符合的后代元素，包括子孫十八代，上面的代碼中"div 段落 3"的 p也被選擇中，這一點(diǎn)和后面的子選擇器最大的區(qū)別。
渲染效果：
**2、子選擇器 (>) **
指定元素子元素的所有元素。div > p，選擇div元素下的子元素，只包括子元素
代碼：
<style>
div > p {background-color: yellow;
}
</style>
</head>
<body>
<div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>
“div 段落 3”屬于孫子p，在子選擇器中不被選中。
渲染效果：
3、相鄰兄弟選擇器 (+)
相鄰兄弟選擇器匹配所有作為指定元素的相鄰?fù)?jí)的元素。兄弟（同級(jí)）元素必須具有相同的父元素，“相鄰”的意思是“緊隨其后”
代碼：
<style>
div + p {background-color: yellow;
}
</style>
</head>
<body>
<div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>
渲染效果：相鄰兄弟選擇器強(qiáng)調(diào)的事“緊隨其后”的，div元素同級(jí)一級(jí)并且緊隨其后的是“<p>段落 4。不在 div 中。</p>”。
4、通用兄弟選擇器 (~)
通用兄弟選擇器匹配屬于指定元素的同級(jí)元素的所有元素
代碼：
<style>
div ~ p {background-color: yellow;
}
</style>
</head>
<body><div><p>div 段落 1。</p><p>div 段落 2。</p><div> div2 <p> div2 中的 p</p></div><section><p>div 段落 3。</p></section>
</div><p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p></body>
渲染效果：與div同級(jí)并且是p的就包括“<p>段落 4。不在 div 中。</p>”和“<p>段落 5。不在 div 中。</p>”
