CSS关系选择器
之前我们学了CSS中的基础选择器,现在来看下CSS中的关系选择器。
1.包含选择器(E F)
选择所有被E元素包含的F元素,中间用空格隔开
ul li{color:green;}
<ul>
<li>宝马</li>
<li>奔驰</li>
</ul>
<ol>
<li>奥迪</li>
</ol>
2.子选择器(E>F)
选择所有作为E元素的直接子元素F,对更深一层的元素不起作用,用>表示
div>a{color:red}
<div>
<a href="#">子元素1</a>
<p>
<a href="#">孙元素</a>
</p>
<a href="#">子元素2</a>
</div>
3.相邻选择器(E+F)
选择紧跟E元素后的F元素,用加好表示,选择相邻的第一个兄弟元素。
h1+p{color:red;}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>
4.兄弟选择器(E~F)
选择E元素之后的所有兄弟元素F,作用于多个元素,用~隔开
h1~p{color:red;}
<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>