css中:first-child
类别:Web前端 浏览量:1506
时间:2015-6-9 css中:first-child
css中:first-child一、css中:first-child的理解
:first-child 伪类向元素的第一个子元素添加样式,利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。
例如
E:first-child 正确的理解应该是:只要E元素是它的父级的第一个子元素,就选中。它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”。
实例1
<style>
span:first-child{color: red;}
p:first-child{color: blue;} /*p元素的父元素的第一个子元素是li而不是p元素,因此该样式不起作用*/
i:first-child{color: orange;}
</style>
<li class="demo">
<li>.demo的第一个子元素是li</li>
<!--第一个span元素是它的父级P元素的第一个span,颜色变红色-->
<p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i,颜色变橙色-->
<p>一个链接<i>第一个i元素</i></p>
<!--第二个i元素是它的父级a元素的第一个i,颜色变橙色-->
<p>一个链接<i>第二个i元素</i></p>
<p>一个链接</p>
</li>
效果:
实例2、匹配第一个 <p> 元素
<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
例子3、匹配所有 <p> 元素中的第一个 <em> 元素
<style type="text/css">
p > em:first-child
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
例子4、匹配所有第一个子元素 <p> 元素中的所有 <em> 元素
<style type="text/css">
p:first-child em
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
例子5
p:first-child 匹配到的是p元素,因为p元素是li的第一个子元素;
h1:first-child 匹配不到任何元素,因为在这里h1是li的第二个子元素,而不是第一个;
span:first-child 匹配不到任何元素,因为在这里两个span元素都不是li的第一个子元素;
:first-child 匹配到的是p元素,因为在这里li的第一个子元素就是p。
二、:first-child常见的误解
1、认为E:first-child选中E元素的第一个子元素,但事实并不是
<!--误解一-->
<style>
li:first-child{color: red;}
</style>
<li class="demo">
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</li>
效果是这样的:
2、认为E:first-child选中E元素的父元素的第一个E元素,但事实并不是
<!--误解二-->
<style>
li a:first-child{color: red;}
</style>
<li class="demo">
<p>一个段落</p>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</li>
效果是这样的:
标签:css
您可能感兴趣
- web前端css总结(前端面试必备之CSS3的新特性)
- csstable列宽固定(css display table 自适应高度、宽度问题的解决)
- css代码大全登录界面(Div+CSS仿微信公众平台登录页面)
- css的背景图的平铺方式有哪几种(纯CSS实现hover图片pop-out弹出效果的实例代码)
- css3按钮闪烁(纯CSS3代码实现switch滑动开关按钮效果)
- 史上最全的css布局教程(详解CSS经典布局之Sticky footer布局)
- css制作磨砂图片(CSS制作梦幻彩虹效果)
- css安全模式(仅针对IE8有效的CSS Hack猎奇写法)
- css一键布局(css多种方式实现双飞翼布局)
- css子块级元素有用吗(css中行内元素和块级元素的区别)
- CSS3弹性布局
- css选择器使用时需要注意哪些方面(CSS选择器的新用法推荐)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- 三种css选择符(浅谈css之属性及剩余的选择符)
- css3带阴影弹出窗口(CSS3解决移动页面上点击链接触发色块的问题)
- div和css怎么铺背景(css3实现一个div设置多张背景图片及background-image属性实例演示)
- 菲律宾游学(菲律宾游学中介机构)
- 菲律宾美食(菲律宾美食排行榜前十名)
- 菲律宾特产(菲律宾特产最值得买回国)
- 越南特产(越南特产首饰)
- TVB负评王连续挑战警察角色《使徒行者3》中将饰演卧底(TVB负评王连续挑战警察角色使徒行者3中将饰演卧底)
- 《精英律师》剧照首曝光,实力演员飙戏,演绎律政职场百态(精英律师剧照首曝光)
热门推荐
- sql语句查询所有成绩(SQL查询排名函数实例)
- dedecms如何做弹窗(dedecms列表推荐文章默认为加粗的修改方法)
- sqlserver中的存盘按钮在哪(SQL Server 2016里的sys.dm_exec_input_buffer的问题)
- php在已有目录下创建文件(php写入文件不覆盖的实例讲解)
- 学会python一月能赚多少钱(学习python的前途 python挣钱)
- mysql学习之索引介绍及其原理(MySQL学习教程之聚簇索引)
- web服务器和http服务器的区别(浅谈WEB服务器、应用程序服务器、HTTP服务器区别)
- mstsc远程桌面不成功(远程桌面连接命令mstsc怎么用)
- web.config里面使用configSource
- 怎么新建数据库登录名用sql语句(T-sql语句修改SQL Server数据库逻辑名、数据库名、物理名的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9