css选择器 nth-child

html代码：

<div><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p>
</div>

一、nth-child

1.1、nth-child(n) 父元素下的第n个子元素，n必须大于0，索引都是从1开始。

div p:nth-child(2){background: skyblue;
}

ps、这里仅仅说是父元素的第几个子元素，而并没有限制该类型的子元素。比如：

<div><h3>天气</h3><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p>
</div>

运行之后：

1.2、nth-child(odd) 父元素下的奇数子元素等同于 nth-child(2n-1)

div p:nth-child(odd){background: skyblue;
}

ps、这货是区分子元素类型的，比如：

<div><h3>天气</h3><h3>天气</h3><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p>
</div>

1.3、nth-child(even) 父元素下的偶数子元素同样区分子元素类型等同于nth-child(2n)

div p:nth-child(even){background: skyblue;
}

1.4、nth-child(an+b) 公式计算 n可以为0

div p:nth-child(2n+1){background: skyblue;
}

ps、区分子元素类型的，父元素的an+b个子元素，但是该元素必须是p

1.5、first-child 选择父元素下的第一个子元素如果第一个子元素不是该类型，选择不到等同于 nth-child(1)

div p:first-child{background: skyblue;
}

1.6、last-child 选择父元素下的最后一个子元素如果最后一个子元素不是该类型，选择不到

div p:last-child{background: skyblue;
}

二、nth-of-type 匹配属于父元素的特定类型的第 N 个子元素的每个元素忽略不是该类型的元素的存在

<div><h3>天气</h3><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p><p>多云转晴</p>
</div>

div p:nth-of-type(1){background: skyblue;
}

转载于:https://www.cnblogs.com/xlj-code/p/8041884.html

css选择器 nth-child相关推荐

nth:child()选择器
nth:child()属于CSS3中的选择器,针对于有多个相同标签时可以对每个标签的样式进行单独设置,以微信小程序开发中所写的代码为例: 这是wxml中的代码(类似于html): 这是wxss中的代码 ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
最常用的css选择器及兼容性 +几个好用却不多见的 nth-child等
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
CSS选择器学习小结
前言: 半途出家做Front End,以前只是大概知道点,现在就必须从头把css好好看看啦,呜呜~~~~~~ 一.基本选择器序号选择器含义 1. * 通用元素选择器,匹配任何元素 2. E 标签 ...
“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？
本文翻译自:What does the "~" (tilde/squiggle/twiddle) CSS selector mean? Searching for the ~ ch ...
30个最常用css选择器解析
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...
css a标签去掉下划线_这30个CSS选择器，你必须熟记（上）
CSS的魅力就是让我们前端工程师像设计师一样进行网页的设计,我们能轻而易举的改变颜色.布局.制作出漂亮的阴影效果等等,我们只需要改几行代码,不需要借助任何软件,就能轻而易举的实现,感觉就像魔法师一般, ...
html类选择器使用在什么场景,CSS选择器
**关键字: ** ** 1.css选择器使用场景; ** ** 2.css选择器优先级; ** 3. first-child和:first-of-type 1.class 和 id 的使用场景? c ...
css选择器按功能分,CSS 选择器
概览在 CSS 中,选择器用于选择需要添加样式的元素. CSS 选择器非常丰富,现将 CSS 1 - 3 目前所有的选择器列举如下. 选择器例子例子描述 CSS版本 .class .intro ...
HTML5 CSS选择器总结（强烈推荐）
你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领 ...

css选择器 nth-child

css选择器 nth-child相关推荐

最新文章

热门文章