CSS选择器:nth-child()和:nth-of-type()的使用

时间: 2019-09-06阅读: 1595标签: 选择器

今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。


一、:nth-child()和:nth-of-type()的支持度

所有主流浏览器均支持:nth-child()和:nth-of-type()选择器,除了 IE8 及更早的版本。


二、:nth-child()和:nth-of-type()的一般使用方法

1、:nth-child(x); 选择第x的元素

2、:nth-child(x*n) x的n倍元素

3、:nth-child(n+x); 选择 =>x 的元素

4、:nth-child(-n+x) 选择 =< x 的元素

5、:nth-child(nx+1); nx-1 隔开n*x选取一个

6、nth-child(odd)/nth-child(even) 奇数偶数


三、:nth-child()和:nth-of-type()的一些不同之处

:nth-child()

混合型跳过模式:这个是我自己取得名字。意思就是说同一个父级下如果我们选择了第二个元素p:nth-child(2)。但是第二个元素不是p标签而是其他的标签,那么选择的标签不成立,选择不了。

代码如下:

<div id="a1">
<p>CGLweb前端</p>
<div>CGLweb前端</div>
<p>CGLweb前端</p>
</div>
<style type="text/css">
#a1 p:nth-child(2){ background:#000000;}(www.gendna5.com)
</style>

:nth-of-type()

匹配标签选择模式,比如说代码div:nth-of-type(2n),不考虑其他的标签,先把同级div排列一下,然后2的倍数的时候选择他。

<div id="a2">
<p>p1</p>
<div>div1</div>
<p>p2</p>
<div>div2</div>
<div>div3</div>
<p>p3</p>
<div>div4</div>
<div>div5</div>
<div>div6</div>
</div>
<style type="text/css">
#a2 div:nth-of-type(2n){ background:#000000; color:#fff;}
</style>


四、一般使用方法

1、:nth-child(x); 选择第x的元素

代码:

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<style type="text/css">
.div1 p:nth-child(5){ background:#0086b3; color:#fff;}
</style>

2、:nth-child(x*n) x的n倍元素

代码:

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<style type="text/css">
.div2 p:nth-child(2n){ background:#0086b3; color:#fff;}
</style>

3、:nth-child(n+x); 选择 =>x 的元素

代码:

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<style type="text/css">
.div3 p:nth-child(n+3){ background:#0086b3; color:#fff;}
</style>

4、:nth-child(-n+x) 选择 =< x 的元素

代码:

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<style type="text/css">
.div4 p:nth-child(-n+3){ background:#0086b3; color:#fff;}
</style>

5、:nth-child(nx+1); nx-1 隔开n*x选取一个

代码:

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<style type="text/css">
.div5 p:nth-child(3n+1){ background:#0086b3; color:#fff;}
</style>

6、nth-child(odd)/nth-child(even) 奇数偶数

代码:

<div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
<p>p7</p>
<p>p8</p>
</div>
<style type="text/css">
.div6 p:nth-child(odd){ background:#0086b3; color:#fff;}
.div6 p:nth-child(even){ background:#f4b613; color:#fff;}
</style>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/5173

javascript选择器有哪些?

JavaScript选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()。

CSS选择器及优先级

!important > 内联 > ID选择器 > 类选择器 > 标签选择器。优先级是由A、B、C、D的值来决定的,其中它们的值计算规则如下:如果存在内联样式,那么A = 1, 否则A = 0;B的值等于ID选择器出现的次数;

CSS 伪选择器 focus-within 介绍

CSS中的 :focus-within 伪选择器可有点“不寻常”,尽管它的名称看上去很简单,而且相当直观。但它的解释是:选择一个包含具有:focus 的任何子元素的元素。有点绕是不是,但仔细读应该也能理解,下面通过具体的例子你就更能理解了

CSS选择器与CSS的继承,层叠和特殊性

.类选器名称{css样式代码;}这样的类选择器在css样式编码中是最常用到的,注意:1.英文圆点开头2.其中类选器名称可以任意起名(但不要起中文);除此之外,还有ID选择器,不过在很多方面,ID选择器都类似于类选择符

CSS3 target 选择器_:target伪类的使用

arget作为目标伪类选择器,是css3中的新特性之一。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。:target 选择器可用于选取当前活动的目标元素。

css3选择器归类整理_基本选择器和属性选择器

CSS3选择器分类如下图所示,通配选择器*选择文档中所有HTML元素;类选择器选择指定class属性值为class的任意类型的任意多个元素

css 选择器符号

空格:后代选择器,表示div元素里面所有的p元素。> 子选择器:表示div元素里面所有的子代(不含孙代及以后)p元素,~兄弟元素选择器:表示.cls元素往后的同级的p元素

CSS3 中关于 *-of-type 和 *-child的差异性及适用场景

CSS3 中有很多表示元素序号的选择器,有以下几种:first-child、:first-of-type、:last-of-type、:only-of-type、:only-child、:nth-child(n)、:nth-last-child(n)、:nth-of-type(n)、:nth-last-of-type(n)、:last-child

vue中能穿透组件的css选择器

如果父组件style设置了scoped,除了全局样式与子组件内部修改样式以外不受外部样式的影响,但要是父组件想修改子组件某个地方的样式但又不想为了这么一点变动去添加个全局样式该怎么做呢?

你需要知道的CSS 属性选择器!

属性选择器非常神奇。它们可以使你摆脱棘手的问题,帮助你避免添加类,并指出代码中的一些问题。但是不要担心,虽然属性选择器非常复杂和强大,但是它们很容易学习和使用。在本文中,我们将讨论它们是如何运行的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!