子代选择器
子代选择器用 >
表示,只选择指定元素的子元素(儿子标签);IE7开始兼容,IE6不兼容
div>p{
color:red;
}
div 标签的儿子(一级子标签) p 标签;和 div 标签的后代(当前元素下的所有子标签) p 标签截然不同
能够选择:
<div>
<p>我是div的儿子</p>
</div>
不能选择:
<div>
<ul>
<li>
<p>我是div的重孙子</p>
</li>
</ul>
</div>
顺序选择器
:first-child
选择指定父元素中第一个子元素;first(第一个),child(孩子):last-child
选择指定父元素中最后个子元素;last (末尾、最后)- IE8开始兼容,IE6、7都不兼容
示例:
选择父级元素为 div 中的第一个后代元素 p:
div p:first-child{
color: red;
background: yellow;
}
<div class="box">
<a href="#"><p>p 标签</p></a>
<p>p 标签1</p>
<p>p 标签2</p>
<p>p 标签3</p>
<p>p 标签4</p>
<div>
<p>p 标签11</p>
<p>p 标签22</p>
</div>
</div>
选择父级元素为 div 中的最后一个后代元素 p:
div p:last-child{
color:blue;
}
由于浏览器的更新需要过程,所以现在如果公司还要求兼容IE6、7,那么就要自己写类名:
<ul>
<li class="first">项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li class="last">项目</li>
</ul>
用类选择器来选择第一个或者最后一个:
ul li.first{
color:red;
}
ul li.last{
color:blue;
}
下一个兄弟选择器
+
表示选择下一个兄弟元素;选择指定的第一个元素之后紧跟的元素(兄弟元素)
IE7开始兼容,IE6不兼容
h3+p{
color:red;
}
选择上的是h3元素后面紧挨着的第一个兄弟。
<h3>我是一个标题</h3>
<p>我是一个段落</p><!--就是我-->
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p><!--还有我-->
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<p>我是一个段落</p><!--可别落下了我-->
<p>我是一个段落</p>
<h3>我是一个标题</h3>
<span>我是一个sapn标签</span><!--别看我,我不是-->
后面所有的兄弟选择器
~
表示后面所有兄弟元素
选择 h1 标签后面所有兄弟元素 p 标签
h1~p {
background: yellow;
}
<div>
<h1>h1 标签</h1>
<p>p 标签</p>
<span>span 标签</span>
<ul>
<li>
<p>p 标签</p>
</li>
</ul>
<p>p 标签</p>
</div>