CSS3 子节点选择器
CSS3中新增了几个子元素选择器,大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class,或者js实现才能实现的效果。现在可以很方便的用选择器实现。
这些新的样式已被现代浏览器及IE9以上支持。
选择器 | 说明 |
:first-child | 第一个子元素 |
:last-child | 最后一个子元素 |
:nth-child(3) | 第三个子元素 |
:nth-last-child(3) | 倒数第三个子元素 |
:nth-child(odd) | 所有奇数个子元素 |
:nth-child(even) | 所有偶数个子元素 |
div h2:nth-of-type(even) | div 中所有的h2元素中,所有的偶数元素(只针对同类型子元素计算) |
:nth-last-of-type | 反过来计算 |
li:nth-child(4n+1) | 循环样式 匹配第1,5,9...个li |
li:nth-child(4n+2) | 循环样式 匹配第2,6,10...个li |
li:nth-child(4n+4) | 可简写为 li:nth-child(4n) |
ul li:first-child:last-child | 是第一个也是最后一个,即匹配ul中只有一个li. |
:only-child | 上面的简写形式。匹配某个父元素只有一个子元素 |
h2:nth-child(3) 与 h2:nth-of-type(3) 的区别?
h2:nth-child(3) 指 第三个子元素中正好是h2则应用该样式
h2:nth-of-type(3) 指所有的h2子元素的合集中,对第三个h2应用该样式
<style type="text/css">
h2:nth-child(3){
background-color:green;
} h2:nth-of-type(3){
background-color:#e00;
}
</style>
</head>
<body>
<div>
<h2>文章标题A</h2>
<p>文章正文。</p>
<h2>文章标题B</h2>
<p>文章正文。</p>
<h2>文章标题C</h2>
<p>文章正文。</p>
<h2>文章标题D</h2>
<p>文章正文。</p>
</div>
</body>
结果:
循环样式的使用区别?
<style type="text/css">
/*对第1,5,9个li标签应用样式*/
li:nth-child(4n+1) {
background-color: yellow;
}
/*对第2,6,10个li标签应用样式*/
li:nth-child(4n+2) {
background-color: limegreen;
}
li:nth-child(4n+3) {
background-color: red;
}
li:nth-child(4n) {
background-color: #999;
}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
<li>列表项目7</li>
<li>列表项目8</li>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
</body>
效果:
:nth-child(1) 等价于 :first-child
:nth-last-child(1) 等价于 :last-child
:first-child:last-child 等价于 :only-child
CSS3 子节点选择器的更多相关文章
- IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1
要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- 5月25日-js操作DOM遍历子节点
一.遍历节点 遍历子节点 children();//获取节点的所有直接子类 遍历同辈节点 next(); prev(); siblings();//所有同辈元素 *find(); 从后代元素中查找匹配 ...
- css3的nth-child选择器的具体探讨
css3的nth-child选择器的具体探讨 前言 在十年前開始的div+css布局兴起之时,我就開始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,仅仅有ID选择器,CLA ...
- CSS3 伪类选择器 nth-child() 的用法
伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...
- CSS3的nth-child() 选择器
CSS3的nth-child() 选择器,表格奇偶行变色 nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个 ...
- CSS3 nth-of-type(n)选择器 last-of-type选择器 nth-last-of-type(n)选择器 CSS3 only-child选择器 only-of-type选择器
CSS3 nth-of-type(n)选择器 “:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似,不同的是它只计算父元素中指定的某种类型的子元素.当某个元素中的子元 ...
- JavaScript DOM查询,原生js实现元素子节点的获取
在网页网页开发中,经常会需要获取某个网页元素的子元素,然后对其进行事件绑定.或样式修改等行为.这些操作对于jquery来说很容易,但是对于原生js会稍微麻烦一些,这里将介绍四种方法获取元素的子元素(本 ...
- CSS3的nth-child() 选择器,表格奇偶行变色
nth-child() 应用背景 CSS3的nth-child() 选择器,我之前很少用,在做表格偶数行变色的时候,我通常在绑定的时候,做一个js判断,来加一个css,从而使表格偶数行和奇数行颜色不一 ...
随机推荐
- Cacti监控mysql数据库server实现过程
前言:cactiserver端安装请參考:http://blog.csdn.net/mchdba/article/details/27120605 1 先在cactiserver端安装mysql模板 ...
- Kali-linux设置ProxyChains
ProxyChains是Linux和其他Unices下的代理工具.它可以使任何程序通过代理上网,允许TCP和DNS通过代理隧道,支持HTTP.SOCKS4和SOCKS5类型的代理服务器,并且可配置多个 ...
- VC++读写*.ini配置文件
ini文件(即Initialization file),这种类型的文件中通常存放的是一个程序的初始化信息.ini文件由若干个节(Section)组成,每个Section由若干键(Key)组成,每个Ke ...
- 【SPJ6285 NGM2 - Another Game With Numbers】 题解
题目链接:https://www.luogu.org/problemnew/show/SP6285 唉好久之前校内模拟赛的题目 嘴上说着明白但是实现起来我的位运算太丑陋了啊! #include < ...
- px,rem,em的区别
PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...
- MVC导航菜单高亮显示实现思路
///代码不是我写的,但是已经亲自测试过了,按照我的理解写的注释,不对的地方大家评论指出 @{ @*这个是把当前的路由值格式化并保存到currentController这个变量中,这里是格式化为Con ...
- kakfa 开发-01
kafka 开发梳理 使用内置的zoookeeper启动 bin/zookeeper-server-start.sh config/zookeeper.properties tips: 出现0.0.0 ...
- 课时25.a标签基本使用(掌握)
什么是a标签? 我们打开百度或者淘宝网页,观察任何一个超链接都会发现它有如下特质: 有下划线 移上去有小手指 可以点击 a标签的作用:就是用于控制页面与页面之间跳转的 a标签的格式:<a hre ...
- maven中的坐标和仓库
1.坐标 pom.xml中的groupId.artifactId和version都可以构成项目的坐标. <dependency> <groupId></groupI ...
- 安装oracle11g时遇到环境不满足最低要求
在安装oracle11g时出现问题:INS-13001环境不满足最低要求 解决方法:找到下载解压后的文件,依次打开以下文件路径:Oracle11g\database\stage\cvu, 在cvu文件 ...