CSS3 :nth-child(n)使用注意
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素;
p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第n个子元素
注意:n是从1开始的
如下代码,p:nth-child(1),只会选中第二个div中第一个子元素p;
不会选中第一个div中的第一个p,因为第一个div中第一p元素不是第一个子元素
<style>
p:nth-child(1){
color:red
}
</style>
<div style="border:1px solid">
<span>div span中第一个段落。</span>
<p>div 中第一个段落。</p>
<p>div 中的最后一个段落。</p>
</div><br> <div style="border:1px solid">
<p>另一个 div 中第一个段落。</p>
<p>另一个 div 中的最后一个段落。</p>
</div>
正方向范围
li:nth-child(n+6)
选中从第6个开始的子元素
负方向范围
:nth-child(-n+9)
选中从第1个到第9个子元素。使用 :nth-child(-n+9) ,就相当让你选中第9个和其之前的所有子元素
前后限制范围
:nth-child(n+4):nth-child(-n+8)
选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素,上面的例子里是从第4个到第8个子元素
奇数、偶数位
:nth-child(odd)
:nth-child(even)
隔选择子元素
:nth-child(3n+1),
选择1,4,7,10
范围高级用法
nth-child(n+2):nth-child(odd):nth-child(-n+9)
使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位,并且只包含奇数位。
CSS3 :nth-child(n)使用注意的更多相关文章
- CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</s ...
- 前端开发面试题总结之——CSS3
____________________________________________________________________________________________ 相关知识点 布 ...
- HTML5 CSS3面试题
一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...
- CSS/CSS3语法新特性笔记
CSS层叠样式表 三大特性 层叠性:相同的样式会覆盖 继承性:属性可向下继承 优先级:范围越小权重越高 选择器 基础选择器 标签选择器 1 body { 2 color:#fff; 3 } 类选择器 ...
- web前端面试题总结
HTML Doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1).<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前.告知浏览器的解析 ...
- 前端开发面试知识点大纲--摘自jackyWHJ
前端开发面试知识点大纲:HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应 Ja ...
- HTML、CSS部分
要点:对Web标准的理解.浏览器差异.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端开发 技术等 1.Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分 ...
- HTML5面试题-备
万不可投机取巧.只求当时过关,非长久之计也!(感谢大神分享) 面试有几点需要注意: 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑.深度↑.方向↑. 题目类型: 技术视野.项目细节.理论知 ...
- CSS 基础总结
CSS基础 Doctype 声明位于文档中的最前面,处于 标签之前.告知浏览器的解析器,用什么文档类型 规范来解析这个文档. 在标准模式中,浏览器根据规范呈现页面: 在混杂模式中,页面以一种比较宽松的 ...
- 在TextBox里面仅仅允许数字,按Enter键进入下一个TextBox
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...
随机推荐
- [转载红鱼儿]delphi 实现微信开发(2)接入微信公众号平台
先要学习一下接入的资料,在这里,因为原理都在,所以一定要认真阅读,然后,利用Delphi实现一个对应函数,然后申请微信公众平台接口测试帐号. function CheckSignature(const ...
- servlet-cookie
/** * Cookie学习; * 作用:解决了发送的不同请求的数据共享问题 * 使用: * 1.Cookie的创建和存储 * ...
- phonegap android插件,启动activity并返回值
Your execute menthod is not quite right. When you do: return new PluginResult(PluginResult.Status.OK ...
- js动态添加删除行,兼容ie和火狐
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python nan 变成0
在使用numpy数组的过程中时常会出现nan或者inf的元素,可能会造成数值计算时的一些错误.这里提供一个numpy库函数的用法,使nan和inf能够最简单地转换成相应的数值. numpy.nan_t ...
- 75. Sort Colors(颜色排序) from LeetCode
75. Sort Colors 给定一个具有红色,白色或蓝色的n个对象的数组,将它们就地 排序,使相同颜色的对象相邻,颜色顺序为红色,白色和蓝色. 这里,我们将使用整数0,1和2分别表示红色, ...
- numpy.sort()学习记录
python的功能真的是只有我想不到,没有它做不到 在学系np.sort中学到了一些 print(array2) [14 13 12 11] [10 9 8 7] [ 6 5 4 3] print(n ...
- jquery ui导入两次的错误提示
如果jquery ui plugin的js文件出现到两次的话,就会出现报错. 解决办法: 找出引用了jquery ui 的文件,将其中一个去掉就ok了. 在Firefox下面的报错提示: TypeEr ...
- Delphi 动态链接库的动态和静态调用 (仔细读一下)
http://blog.163.com/bxf_0011/blog/static/35420330200952075114318/ 为了让人能快速的理解 静态调用.动态调用,现在做一个函数封装在一个D ...
- Ubuntu14.04下Pycharm3.4 字体渲染
在ubuntu下搭建了django的开发环境,搭建过程十分简单,Pycharm的安装更简单,下载tar包解压并执行bin目录下的脚本即可,但是看着那个字体真心不爽.于是开始搜索调教. 1.安装打了渲染 ...