组合选择符说明了两个选择器之间的关系
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）
后代选择器
后代选择器用于选取某元素的后代元素，以空格分隔
下面举个栗子，下面的代码会把div元素后代的p元素背景变为粉红色
<!DOCTYPE html><html><head><meta charset="utf-8"> <title></title> <style>div p{ background-color:pink;
}</style></head><body><div><p>后代元素1</p><p>后代元素2</p></div><p>不是后代元素</p></body></html>
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。
<!DOCTYPE HTML><html><head><style type="text/css">h1 > strong {color:red;}</style></head><body><h1>This is <strong>very</strong> <strong>very</strong> important.</h1><h1>This is <em>really <strong>very</strong></em> important.</h1></body></html>这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
相邻兄弟选择器
当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中
语法：前方元素 + 目标元素 {样式声明 }
<!DOCTYPE HTML><html><head><style type="text/css">h1 + p {background-color:pink;}</style></head><body><h1>This is a heading.</h1><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p><p>This is paragraph.</p></body></html>
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
<html><head><meta charset="utf-8"> <title></title> <style>div~p{ background-color:yellow;
}</style></head><body>
<p>之前段落，不会添加背景颜色。</p><div><p>段落 1 在 div 中。</p><p>段落 2 在 div 中。</p></div><p>段落 3不在 div 中。</p><p>段落 4不在 div 中。</p></body></html>
作者：DivMa
链接：https://www.jianshu.com/p/8d1599189aa5
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦