首先他们都是属于结构伪类选择器，都可以键入公式、关键词、序号等 不过他们在指定查找元素时会小小的区别 nth-child:会将所有元素进行标号，当查找指定元素是，会先根据序号查找该元素，找到后在与伪类前面的元素进行匹配...，匹配一致才赋予样式 如下 nth-child section div:nth-child...1 2 3 与nth-child
:nth-child匹配下标满足条件的子元素。... 来匹配下标满足如下条件的元素 第1个 li:first-child 第5个 li:nth-child...(5) 第1个到第5个 li:nth-child(-n+5) 第6个到最后 li:nth-child(n+6) 最后1个 li:last-child 倒数第二个 li:nth-last-child...(2) 奇数个 li:nth-child(odd) 或 li:nth-child(2n+1) 偶数个 li:nth-child(even) 或 li:nth-child(2n) 兼容性 IE9+，...让IE6+支持:nth-child方法是，可以用selectivizr 其他 :nth Tester 帮助理解:nth-child和:nth-of-type the-difference-between-nth-child-and-nth-of-type
css3 nth-child选择器 css3的nth-child选择器，乍看起来很简单，其实不是那么容易。...简单用法 p:nth-child(n) // 选择属于其父元素的第n个子元素的每个 元素 p:nth-child(2n) // 选择属于其父元素的子元素的每个偶数 元素 p:nth-child...这和程序里面的数组起始序号还有jQuery的选择器都是不一样的。 这样子就很好理解了。...当我们要选择哪些元素的时候，只要把参数根据n的递增算出来的值对应到子元素在父元素里面的位置序列就好了 比如查找第一个元素 :nth-child(1) 查找序列大于等于10的元素 :nth-child(n...+10) 就这样子的 css3中还有一些其他的子元素选择器 比如 :first-child // 第一个元素 :last-child // 最后一个元素 :nth-last-child // 从最后一个子元素开始计数
在开发过程中，会碰到一些选择器的需求： 例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。...举例：第三行字体显示为蓝色，代码如下： li:nth-child(3){ color: blue; } nth-child(odd) nth-child(odd)：选择列表的奇数行。...: #999; } nth-child(even) nth-child(even)：选择列表的偶数行。...nth-child(2n) 。...举例：前三行背景色设置为绿色，代码如下： li:nth-child(-n+3){ background: #2cae1d; } nth-child(n+n) nth-child(n+n)：选择第
1、先看效果图 上图中比较麻烦的是每块的底色处理，下面看怎么处理 2、:nth-child(n) 选择器 匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。...数字：最常见的使用方式，eg: :nth-child(1) 关键词: Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。...3、主要思路： 运用less混合传参，参数既是 :nth-child(n) 选择器的公式 在混合里面处理每个原色的底色，通过 :nth-child(n) 选择器结合 ::after 伪元素实现。...有了思路之后，下面让我们看一下具体的代码实现 4、代码实现 以下只贴颜色处理的核心代码 .colorLine(@index, @startColor, @endColor) { .li-item:nth-child
css3的nth-child选择器的详细探讨 前言 在十年前开始的div+css布局兴起之时,我就开始了CSS的学习和实践.在当年,对于CSS选择器,基本上是没有什么选择性的,只有ID选择器,CLASS...选择器,以及元素选择器,当然,还包括#id p 这种子选择器....当我们把 nth-child 这个选择器用到极致的时候,可以说,我们在处理任何列表的时候,是不需要给这些列加上class的. 有哪些 nth-child ?...nth-child 不仅仅只有一个,而是有一系列的这样的选择器,可以供我们在各种情况下使用....我们需要换一个选择器,这个选择器就是 nth-last-child. nth-last-child选择器的用法,和 nth-child 选择器的用法是完全一致的,只有一个不同,那就是 nth-child
一、CSS3 结构伪类选择器 ---- 常见的 结构伪类选择器 : E:first-child 选择器 : E 表示 HTML 标签类型 , 该选择器 选择 匹配的父容器 中的 第一个 E 类型标签 子元素.../* 结构伪类选择器 选择 ul 父容器下的 最后一个 li 子元素 */ background-color: pink; } E:nth-child(n) 选择器...(n) 选择器 ---- 1、E:nth-child(n) 选择器语法说明 E:nth-child(n) 选择器 : 该选择器 选择 匹配的父容器 中的 第 n 个 E 类型标签 子元素 ; E:nth-child...: red; } ul li:nth-child(odd) { /* 结构伪类选择器 选择 ul 父容器下的 奇数索引的 li... ul li:nth-child(1) { /* 结构伪类选择器 选择 ul 父容器下的 第 1 个 li 子元素 */
可以用 CSS 选择器 nth-child 来实现： nth-child 有不少扩展应用，比如： nth-child(odd) 匹配奇数个（1、3、5）。...nth-child(odd) 匹配偶数个（2、4、6）。 nth-child(3n) 匹配3的倍数个（3、6、9）。 nth-child(3n+1) 匹配3的倍数加1个（1、7、10）。 ?...(10n-0),.icon>li:nth-child(10n-1),.icon>li:nth-child(10n-2),.icon>li:nth-child(10n-3),.icon>li:nth-child...1),.icon>li:nth-child(10n-2),.icon>li:nth-child(10n-3),.icon>li:nth-child(10n-4) 选中第 678910 个，设置下边框。...声明：本文由w3h5原创，转载请注明出处：《利用CSS选择器nth-child实现隔行设置不同样式》 https://www.w3h5.com/post/302.html
文章目录 一、CSS 选择器作用 二、CSS 选择器分类 三、标签选择器 1、简介 2、代码示例 四、类选择器 1、简介 2、类名规范 3、代码示例 4、div 与 span 标签 ① span...选择器分类 ---- CSS 选择器 主要分为 : 基础选择器 复合选择器 两种类型 ; CSS 基础选择器 主要分为以下几类 : 标签选择器 类选择器 id 选择器 通配符选择器 三、标签选择器 --...1、简介 CSS 类选择器 可以 将 页面中的 某几个 标签选择出来 , 使用 " .类名 " 识别标签 ; CSS 类选择器 使用方式如下 : 首先 , 在标签中的 class 属性中设置类名 ;...标签内容 然后 , 在 CSS 中使用 " .类名 " 作为 类选择器 , 选出设置指定类名的标签 ; .name { color: blue;...font-size:20px; } CSS 类选择器 优点 : 可以选择指定的若干标签 ; 2、类名规范 类名规范 : 多个单词组成的类名 , 推荐使用 - 隔开 ; 不要使用 纯数字 ,
属性选择器 1E[att$=”val”]{ sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素。 1 选择器--> 18 列表项目 18 列表项目 19 20 21 属性选择器的权值是
CSS 伪类 选择器 例子 例子描述 :active a:active 选择活动的链接。 :checked input:checked 选择每个被选中的 元素。...:nth-child(n) p:nth-child(2) 选择作为其父的第二个子元素的每个 元素。...CSS 伪元素 选择器 例子 例子描述 ::after p::after 在每个 元素之后插入内容。 ::before p::before 在每个 元素之前插入内容。
DOCTYPE html> 选择器 - 兄弟伪类 java javascript c++ 平面设计 伪类选择器...DOCTYPE html> 选择器 - 相对父元素的伪类...DOCTYPE html> CSS3 选择器 -伪类target 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
解释什么是伪类选择器，以及如何使用伪类选择器 import pyquery from pyquery import PyQuery as pq html = ''' ...> 谷歌 ''' ''' 伪类选择器...li:last-child') print(li) # 选取第三个li节点 li = doc('li:nth-child(3)') # 索引从1开始 print(li) # 选取索引小于2的li节点...) # 选取索引大于3的li节点（索引从0开始） li = doc('li:gt(3)') print(li) # 选取序号为奇数的li节点, 第1个li节点的序号为1 li = doc('li:nth-child...(2n+1)') print(li) # 选取序号为偶数的li节点, 第1个li节点的序号为1 li = doc('li:nth-child(2n)') print(li) # 选取文本内容包含com
六、伪类选择器和类选择器一起使用 示意图
======================================================================================= 伪类选择器 ? ? ?
1.1 语法:$('div:contains(edu)').css('backgroundColor','yellow');
css04.css 1 /*属性选择器相关样式*/ 2 3 4 [love] { 5 color: green; 6 } 7 8 [love="me"] { 9...and 28 我也是一个p标签 我有一个自定义属性love 其值为me 29 30 属性选择器...1 补充示例 31 属性选择器 2 补充示例 32 属性选择器 3 补充示例... 33 属性选择器 4 补充示例 34 属性选择器 5 补充示例 35 属性选择器 6 补充示例 36 属性选择器 7 补充示例 37
在学习结构性伪类选择器之前，先了解2个概念：CSS中的伪类选择器和伪元素： 1、伪类选择器：CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种...：伪元素{样式} 在后续的文章中会详细介绍伪类选择器的具体使用方法，本文主要是要介绍nth-child、nth-last-child、nth-of-type、nth-last-of-type...结构性伪类选择器的公共特征是允许开发者根据文档结构来指定元素的样式。接下来开始进入正题。...其他几种结构性伪类选择器这里就不做详细介绍了。这里主要是对比三种选择器。...总结： 为了方便记忆和查询，把CSS的结构伪类选择器归为四类： 1）通用子元素过滤器：E:nth-child(n)（顺序过滤）和E:nth-last-child(n)(逆序过滤
document.querySelectorAll()[4]返回所有匹配的HTML元素，这些元素位于类数组NodeList[5]中。 伪类选择器根据HTML元素的当前状态来定位它们。...其他受欢迎的选项包括： :visited：匹配访问过的链接 :target：匹配文档URL所指向的元素 :first-child：指向第一个子元素 :nth-child：选择指定子元素 :empty：匹配没有内容或子元素的元素...… :is伪类选择器 注意：这最初被指定为:matches()和:any()，但:is()已经成为CSS标准。...MDN解释：:is()CSS伪类函数将选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。 你经常需要在不止一个元素上面应用相同的样式。...:is(article, section, aside) p { color: #444; } 单个选择器可以包含任意数量的:is()伪类。
CSS3新增选择器 1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 .list div:nth-child...E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素 ?...可以看到，我主要写了5个div，但是如果我想要给每个div分配设置不同的样式，按照以前的做法就是给每个div进行类名定义。这样感觉写html部分是比较麻烦。...现在有了这个新选择器，就可以这样做，如下： ?...---- 属性选择器： 1、E[attr] 含有attr属性的元素 2、E[attr='ok'] 含有attr属性的元素且它的值为“ok” ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
