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位，并且只包含奇数位。

转载于:https://www.cnblogs.com/baiyangyuanzi/p/6603858.html

CSS3 :nth-child(n)使用注意相关推荐

css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
前端开发面试题总结之——CSS3
相关知识点布局. 浮动. 盒子模型. 弹性和模型. 选择器优先级. 居中定位. 兼容性. hack写法...... 题目&答案如何理解CSS的盒子模型? 每个HTML元素都是长方形盒子. ...
【面试篇】前端点滴（css/css3）
[面试篇]前端点滴(CSS/CSS3)---倾尽所有面试小问答 css基础 css盒模型 css选择器 BFC css(float) css(position/z-index) css(displa ...
HTML5+CSS、CSS3基础知识点总结
一.选择器选择器分为基础选择器和复合选择器两大类. 基础选择器由单个选择器组成基础选择器包括:标签选择器.类选择器.id 选择器和通配符选择器(*) 标签选择器优点标签选择器可以把某一标签全部 ...
CSS/CSS3语法新特性笔记
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
响应式Web设计：HTML5和CSS3实战笔记
1.常用媒体查询特性: A.width:视口宽度. height:视口高度 B.device-width:渲染表面的宽度(设备屏幕的宽度).device-height:渲染表面的高度(设备屏幕的高度) ...
css 取偶数节点_css3 nth 选择器
css3: nth选择器我们把CSS3的:nth选择器也称为CSS3 结构类选择方法: :first-child(),:last-child () :nth-child(n) :nth- ...

CSS3 :nth-child(n)使用注意

隔选择子元素

CSS3 :nth-child(n)使用注意相关推荐

最新文章

热门文章