CSS3-选择器-结构化伪类

宋华发布于2019-08-29 13:28 / 411人阅读

摘要：结构化伪类选择器结构化伪类选择器是基于元素在树中的结构特性跟父节点或者兄弟节点的关系进行匹配选择，比如某个元素的第一个子节点，最后一个节点等等。是从后向前计数。功能匹配元素指定位置计算的结果且是相同类型的兄弟元素。

结构化伪类(Structural pseudo-classes)选择器

结构化伪类选择器是基于DOM元素在DOM树中的结构特性(跟父节点或者兄弟节点的关系)进行匹配选择，比如某个元素的第一个子节点，最后一个节点等等。

:nth-child(an+b) 1. 功能

nth发音/enθ/，表示第n个。匹配元素指定位置（an+b计算的结果）的兄弟元素。“位置”也可以称为下标，下标从1开始，并且计数方式是从前到后（跟:nth-last-child相反）。下标值等于表达式an+b的计算结果。

2. 语法

:nth-child(an+b)在下标计算表达式an+b中：
a,b是系数可以是任意整数；
n就是个字面量“n”，表示是递增变量，并且取值是从0开始的整数。
如a=3, b=1，则计算的下标有（n从0开始递增）：
n=0 -> 3 * 0 + 1 = 1
n=1 -> 3 * 1 + 1 = 4
n=2 -> 3 * 2 + 1 = 7
...
即匹配下标为1,4,7...的兄弟元素。
如a=-3, b=1，则计算的下标有：
n=0 -> -3 * 0 + 1 = 1
n=1 -> -3 * 1 + 1 = -2（结果值小于1，无效）
n=2 -> -3 * 2 + 1 = -5（结果值小于1，无效）
...
即只匹配下标为1的兄弟元素。

3.举例

我们有一段html:

/* 表示下标为1,3,5,7的li标签字体颜色为红色*/
li:nth-child(2n+1) 
{
    color: red;
}

/* 表示下标为2,4,6,8的li标签字体颜色为红色*/
li:nth-child(2n) 
{
    color: red;
}

4.下标变量

变量odd, even是特殊的下标值，分别表示奇数和偶数位置。

/* 表示下标为1,3,5,7的li标签字体颜色为红色*/
li:nth-child(odd) 
{
    color: red;
}

/* 表示下标为2,3,4,8的li标签字体颜色为红色*/
li:nth-child(even) 
{
    color: red;
}

5. 省略表示法

当a=1或者a=-1时，可以省略a,只保留符号

当a=0时，可以省略an部分

当b=0时，可以省略b部分

当b<0时，必须省略加号+

:nth-child(10n+-1) /*无效的语法，必须省略加号*/
:nth-child(10n-1) /*有效的写法*/

6.小结

1）下标从1开始，小于1的计算结果都是无效的

:nth-last-child(an+b)

功能和语法同:nth-child,除了下标计数方式不同。nth-last-child是从后向前计数。

:nth-of-type(an+b) 1. 功能

匹配元素指定位置（an+b计算的结果）且是相同类型的兄弟元素。功能和语法跟:nth-child的唯一区别是：nth-of-type比后者多了个限制条件，即相同标签的兄弟元素才算数。
如HTML片段如：

Style片段：

.item:nth-of-type(2n+1) {
    color: red;
}

显示如下：

:nth-last-of-type(an+b)

nth-last-of-type和nth-of-type的区别就如同nth-last-child和nth-child区别

参考

https://www.w3.org/TR/css3-se...

GPU云服务器云服务器 python选择结构选择器派生选择器省市选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112624.html

谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

Berwin 2019-08-01 18:04 评论0 收藏0
谈谈css伪类与伪元素

摘要：状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。单冒号用于伪类，双冒号用于伪元素。可以通过对父元素添加伪类撑开父元素高度，因为就是其最后一个子元素。 css选择器常见包括id（#id）、标签（tag）、class（.class）、属性[attr=attrval]等，还包括伪元素和伪类选择器。正确的利用伪元素和伪类能...

hedzr 2019-08-29 13:53 评论0 收藏0
总结30个CSS3选择器

摘要：选择器也可以应用到子选择器中，例如下面的代码这样为的所有子标签元素都被选中了，并且设置了。子选择器它与差别就是后面这个指挥选择它的直接子元素。可以的话，尽量使用标准的选择器。伪类选择器和这俩伪类。根据标准规定，可以使用两个冒号。1 *：通用选择器 ? 1 * { margin:0; padding:0; } *选择器是选择页面上的全部元素，上面的...

sutaking 2019-04-23 11:43 评论0 收藏0
伪类与伪元素

摘要：一伪类伪类包含两种状态伪类伪类和结构性伪类。状态伪类是基于元素当前状态进行选择的。二伪元素伪元素是对元素中的特定内容进行操作，而不是描述状态。一、伪类伪类包含两种：状态伪类（UI 伪类）和结构性伪类。 (1)状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样...

ChanceWong 2019-08-30 15:55 评论0 收藏0