网站建设微信公众号小程序app,电商seo名词解释,做商城网站技术要点,asp网站建设 文献CSS :nth-child :nth-child 伪类根据元素在同级元素中的位置来匹配元素. CSS :nth-child 语法 值是关键词 odd/evenAnB最新的 [of S] 语法权重 浏览器兼容性 很简单的例子, 来直觉上理解这个伪类的意思
ulli classmeApple/liliB…CSS :nth-child :nth-child 伪类根据元素在同级元素中的位置来匹配元素. CSS :nth-child 语法 值是关键词 odd/evenAnB最新的 [of S] 语法权重 浏览器兼容性 很简单的例子, 来直觉上理解这个伪类的意思
ulli classmeApple/liliBanana/lili classmePeach/li
/ul
ulliApple/lili classmeBanana/lili classmePeach/li
/ul.me:nth-child(1) { background-color: salmon; } 你也许会奇怪, 为什么下边一组的 Banana 背景不是红色呢? 因为 .me:nth-child(1) 表示选中同级元素中的第一个元素并且该元素 class 包含 me✅, 注意不是选中第一个 class 包含 me 的元素. 所以, 如果同级元素中的第一个元素的 class 不包含 me, 也不会选中.
语法
在 :nth-child() 语法中, 统计的元素包含同级的任何类型元素.
:nth-child() 的完整语法如下, ? 前面的 [] 中内容表示可选, 稍后会介绍这种最新的部分. :nth-child() 只接受一个参数, 该参数描述匹配同级元素的模式, 元素索引从 1 开始, 注意不是 0.
:nth-child(nth [of S]?) { ... }值是关键词 odd/even
odd: 表示在同级元素中奇数位置的元素: 1、3、5…even: 表示在同级元素中偶数位置的元素: 2、4、6…
比如, 在一个表格中我们希望相邻行的背景颜色不同, 这样方便阅读, 就可以这样写
tr:nth-child(even) { background-color: azure; }table border1theadtrthNAME/ththAGE/th thCOUNTRY/th/tr/theadtbodytrtdLevi/td td18/td tdChina/td/trtrtdJune/td td23/td tdUSA/td /trtrtdJiaXin/td td20/td tdChina/td/trtrtdMike/td td22/td tdUK/td/tr/tbody
/tableAnB
不论是 odd 还是 even, 他们都是更普遍表达的特殊情况的简便写法. 使用 AnB 这种记号你可以自由定制你的匹配规则
A: 整数步长n: 非负整数, 从 0 开始B: 整数偏移量
为什么我们说 odd/even 是 AnB 特殊取值时的简便写法呢? 因为
odd - :nth-child(2n1)even - :nth-child(2n)
下面我们就看看 AnB 取不同值的特定用法吧
:nth-child(2): 表示第二个元素
.two:nth-child(2) { background-color: salmon; }ul classflex-1li classtwo1/lili classtwo2/lili classtwo3/li
/ul
ul classflex-1li classtwo1/lili classtwo hidden2/li !-- !!! --li classtwo3/li
/ul从上图中可以看到, 左边的符合我们的预期, 第二个元素并且 class 是 two 的元素背景红了, 但是左边的好像不太行, 因为 display 为 none 的元素也被考虑进来了!!! :nth-child(3n): 表示第3、6、9…个元素. :nth-child(n5): 表示第5、6、7、8、9…个元素. 也就是第五个和后面的元素. :nth-child(-n3): 表示第1(-23)、2(-13)、3(-03)个元素. 如果 n 的值继续增加, 就会选中第0、-1、-2…个元素, 负数位置的元素不存在并且元素是从 1 开始索引的. :nth-child(4n1): 表示第1、5、9…个元素 :nth-child(n): 表示每一个元素 :nth-child(1): 表示第 1 个元素, 是 n 为 1 更特殊的情况
.n:nth-child(n) {background-color: salmon;
}
.n:nth-child(1) {border-width: 3px;
}:nth-child(n3):nth-child(-n5): 表示第3、4、5个元素. 用于选择一个具有上下限范围内的元素
最新的 [of S] 语法
目前 :nth-child() 只能选择特定位置的元素, 比如 .name:nth-child(-n3) 只能选择元素中 class 包含 name 的并且是所有元素中的前三个元素. 但是, 如果我们想要选择前三个 class 包含 name 的元素呢? 那就是最新的 of S 语法
下面的例子
.class1 .item:nth-child(-n3 of .name) {background-color: salmon;
}ul classclass1li classname item1/lili classitem2/lili classitem3/lili classitem4/lili classitem5/lili classname item6/lili classitem7/lili classitem8/lili classname item9/lili classname item10/li
/ul一定要留意两者的不同哦.
你可能问新的语法有什么用呢, 当然有用啦, 比如我们在给表格添加间隔背景时, 如果出现一行元素被隐藏的情况, 会出现什么效果呢?
tr:nth-child(even) {background-color: azure;
}tbodytr/trtr hidden/trtr/trtr/tr
/tbody哇! 被隐藏的那一行也被考虑进入了, 按理说应该只有第二行(JiaXin)才有阴影的, 怎么办呢? 使用 of S. 我们不是要选择偶数行, 而是要选择所有 hidden 为 false 的偶数行.
tr:nth-child(even of :not([hidden])) {background-color: azure;
}权重
:nth-child() 的权重是单个伪类的权重. 如果使用 of S 语法, 那么就是单个伪类的权重加上 S 中权重最高的权重值.
divdiv idcountry1 classcountry1CHINA/div
/div.country1:nth-child(1) {color: blue; /** WIN */
}
.country1 {color: red;
}如果我们再加一个呢?
:nth-child(1 of #country1.country1) {color: green; /** WIN */
}浏览器兼容性
根据 MDN, of S 的新语法需要比较新的浏览器支持
谢谢你看到这里
