摘要：功夫不负有心人，找到了选择器。定义和用法选择器匹配属于其父元素的第个子元素，不论元素的类型，从第一个子元素开始计数第一个子元素的下标是，不要和混淆，是。
这段时间在做一些东西，整理了其中遇到的一个关于CSS选择器的问题。
需要完成一个下图的侧边栏效果：
乍一看，很简单嘛，标签列表、弹框，完工！
然后我就写了如下代码：
基本样式OK了，然后添加:hover等效果：
.primary-tag:hover {
background-color: #F5F5F5;
}
等等，这时候好像发现些什么：
第一个与最后一个li标签悬停时背景溢出了，没关系，so eazy：
.tag li:first-child {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.tag li:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
嗯？怎么回事，first-child生效了，last-chilld没有生效：
仔细思考了一下这两个选择器，发现：
li:first-child 是匹配父元素的第一个li元素
li:last-child 是匹配父元素的最后一个li元素
原来，因为弹框里面也存在li元素，所以last-child属性匹配到了弹框里面的最后一个li，在不修改 HTML 的基础上稍作修改：
li.a:first-child
li.a:last-child
这回总可以了吧，怀揣着希望，摁下了F5，我的天哪，还是原样，一脸懵逼中~~~
仔细查了下资料：
li.a:first-child 匹配父元素中class为a的，且是第一个li
li.a:last-child 匹配父元素中class为a的，且是最后一个li
也就是说，最后一个li如果class为a，last-child生效；否则不生效（这里最后一个li还是匹配的弹框里的li，因为没有class为a，所以选择器失效，不会选中任何元素）。
许多人说：”仅通过CSS是无法实现的，需要通过jQuery.....省略一大段理由”（建立在不更改html结构标签的基础上），难道真的一个这么简单的效果无法通过CSS实现吗？
如果说不可以通过CSS实现，那一定是没有好好了解全CSS的属性选择器。功夫不负有心人，找到了 :nth-child(n) 选择器。
:nth-child(n)定义和用法:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型，从第一个子元素开始计数（第一个子元素的下标是 1，不要和JS混淆，JS是0）。
n 可以是数字、关键词或公式。
例： li:nth-child(2)指定为ul下第二个li
所以，按照如下设置就能达到我们想要的效果：
.a:nth-child(1) {
border-top-left-radius: 8px; //匹配第1个class为a的元素
border-top-right-radius: 8px;
}
.a:nth-child(5) {
border-bottom-left-radius: 8px; //匹配第5个class为a的元素
border-bottom-right-radius: 8px;
}
:nth-child(n)更多设置：
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词。
在这里，我们为奇数 a 元素指定两种不同的背景色，从最后一个子元素开始计数：
.a:nth-child(Odd) {
color: #45E0B1; //匹配class为a的奇数元素
}
偶数：
.a:nth-child(even) {
color: #45E0B1; //匹配class为a的偶数元素
}
其实还有一个能达到上图这种效果，也就是:nth-last-of-type(n)选择器。
:nth-last-of-type(number)定义和用法:nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数（第一个子元素的下标是 1，不要和JS混淆，JS是0）。
n 可以是数字、关键词或公式。
:nth-last-of-type(number)更多设置Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词。
在这里，我们为奇数 a 元素指定两种不同的背景色，从最后一个子元素开始计数：
.a:nth-last-of-type(Odd) {
color: #45E0B1; //匹配class为a的奇数元素
}
偶数：
.a:nth-last-of-type(even) {
color: #45E0B1; //匹配class为a的偶数元素
}
测试一下：
.a:nth-last-of-type(5) {
color: #45E0B1; //匹配class为a的从后往前数的第5个元素（也就是第一个）
}
.a:nth-last-of-type(1) {
color: #26D7D7; //匹配class为a的从后往前数的第1个元素（也就是最后一个）
}
最终效果：
其实很多时候，并不是没有解决办法或者说简便的办法，只是我们不知道，说明还懂得不够，需要学习来充实自己。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115194.html
摘要：前言如果说作为前端开发的基本功那么选择器就是基础中的基础如果你在复写或者学习这些容易令人混淆的选择器那么你就来对地方了我的老伙计本篇文章会直接了当的比较它们的特性帮助你快速的掌握它们这两个选择器会匹配一 前言 如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的...
摘要：前言如果说作为前端开发的基本功那么选择器就是基础中的基础如果你在复写或者学习这些容易令人混淆的选择器那么你就来对地方了我的老伙计本篇文章会直接了当的比较它们的特性帮助你快速的掌握它们这两个选择器会匹配一 前言 如果说 css 作为前端开发的基本功, 那么 选择器 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的...
阅读 1122·2021-11-11 16:53
阅读 1125·2021-09-24 09:47
阅读 868·2019-08-30 12:57
阅读 1933·2019-08-30 11:11
阅读 2067·2019-08-29 15:20
阅读 1758·2019-08-29 14:12
阅读 3092·2019-08-28 17:51
阅读 2302·2019-08-26 13:23
