css选择器 兄弟选择器 相邻兄弟选择器 子元素选择器
https://www.cnblogs.com/xuchao-blogs/p/13728798.html
1.兄弟选择器: ~
该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素);
.p ~ li{ color: blue; }
<div> <p class="p">我是p元素</p> <strong>我是strong元素</strong> <li>我是li元素</li> /*li元素被选中*/ </div>
2.相邻兄弟选择器: +
该选择器会选择当前元素相邻的第一个兄弟元素(不管指定不指定相邻兄弟元素的类型,都会选择相邻第一个元素,如果没有匹配到则不给定样式);
.p + li { color: red; }
<p class="p">我是p元素</p> <li>我是紧邻的li元素</li> /*紧邻的li被选中;如果紧邻p元素的的不是li元素,则没有选中任何元素就无法添加指定样式*/ <strong>我是strong元素</strong>
3.子元素选择器: >
该选择器会选择该元素下的指定子元素(只包括子元素,除了子元素以外的后代选择器不被选择);
.p > li { color: green; }
<p class="p"> <strong>我是strong</strong> <li>我是li1</li> /*被选中*/ <li> /*被选中*/
我是li2
<li>我是p元素的孙子元素li</li> /*作为p元素的孙子元素,不被选中*/
</li> <span>我是span</span> </p>