前端技术学习之选择器(五)
来源:互联网 发布:淘宝主播通过什么赚钱 编辑:程序博客网 时间:2024/06/05 14:49
六,结构性伪类选择器: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选择的是最后一个元素。
- 前端技术学习之选择器(五)
- 前端技术学习之选择器(一)
- 前端技术学习之选择器(二)
- 前端技术学习之选择器(三)
- 前端技术学习之选择器(四)
- 前端技术学习之选择器(六)
- 前端技术学习之选择器(七)
- 前端技术学习之选择器(八)
- 前端技术学习之选择器(九)
- 前端技术学习之选择器(十)
- 前端技术学习之选择器(十一)
- 前端技术学习之选择器(十二)
- 前端技术学习之选择器(十三)
- 前端基础学习之CSS选择器
- 前端基础之五 元素关系及选择器
- JQuery学习笔记5:选择器之五
- 前端学习笔记(五)
- 前端面试学习(五)
- MongoDB学习(一)简介、安装与启动
- android使用百度导航SDK1.1.0实现导航功能。怎么才能实时更新我的位置
- JAVA百科---[基础篇]环境变量配置
- tabbaritem的问题
- mybatis源码DEBUG学习
- 前端技术学习之选择器(五)
- 图片
- unity3d ios开发 调试的流程?
- PAT 乙级 1065. 单身狗(25)
- JSP页面技术之EL表达式
- 关于onCreateOptionsMenu的布局问题
- webView打开的页面和手机浏览器打开的不一样
- MarkdownPad2.5 注册码
- 关于MVC数据传输的问题