前端技术学习之选择器（五）
2017-01-08 00:00
162 查看
六，结构性伪类选择器：first-child
:first-child选择器表示的是选择父元素的第一个子元素E。
代码例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—first-child</title>
<style type="text/css">
ul.ancestor li{
background-color: yellow;
}
ul.ancestor >li{
background-color: green;
}
ul.ancestor >li:first-child{
color: orange;
}
</style>
</head>
<body>
<ul class="ancestor">
<li>
<a href="##">Link1</a>
文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色
</li>
<li>
<a href="##">Link2</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<a href="##">Link3</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<ul>
<li>
<a href="##">Link4</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<a href="##">Link5</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<a href="##">Link6</a>
关注文字颜色，不要关注超链接颜色
</li>
</ul>
</li>
<li>
<a href="##">Link7</a>
不要关注超链接颜色
</li>
</ul>
</body>
</html>
运行效果：
注：与first-child相似的list-child，应用起来和first-child一样只不过list-child选择的是最后一个元素。
:first-child选择器表示的是选择父元素的第一个子元素E。
代码例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构性伪类选择器—first-child</title>
<style type="text/css">
ul.ancestor li{
background-color: yellow;
}
ul.ancestor >li{
background-color: green;
}
ul.ancestor >li:first-child{
color: orange;
}
</style>
</head>
<body>
<ul class="ancestor">
<li>
<a href="##">Link1</a>
文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色
</li>
<li>
<a href="##">Link2</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<a href="##">Link3</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<ul>
<li>
<a href="##">Link4</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<a href="##">Link5</a>
关注文字颜色，不要关注超链接颜色
</li>
<li>
<a href="##">Link6</a>
关注文字颜色，不要关注超链接颜色
</li>
</ul>
</li>
<li>
<a href="##">Link7</a>
不要关注超链接颜色
</li>
</ul>
</body>
</html>
运行效果：
注：与first-child相似的list-child，应用起来和first-child一样只不过list-child选择的是最后一个元素。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 