Last updated 5 years ago
Was this helpful?
p {line-height:1.5em; margin-bottom:1em;}
E F：后代选择器，该选择器选择元素E的后代中所有元素F：
ul li {margin-bottom:0.5em;}
E > F：子选择器，该选择器选择元素E的直接子元素中的所有元素F。
ul>li{color: blue;}
<ul> <li>ao</li> <li class="test">bo</li> <li>co</li> <li> do <ul> <li>1121</li> <li>1121</li> <li>1121</li> <li>1121</li> </ul> </li> </ul>
以上都li标签字体颜色都是蓝色。
li
E + F：相邻兄弟选择器，元素F与元素E具有相同父元素，且位于E元素后面的F元素会被选中，这个选择器只会选择一个，但可以循环下去。
.test +li{ color: blue; }
li +li { color: blue; }
1121这个数字是蓝色，原因是继承了父元素样式。
E ~ F：通用兄弟选择器，该选择器要求有共同父元素的，且E元素后面的所有F元素会被选中。
参考：
