这段时间在做一些东西,整理了其中遇到的一个关于CSS选择器的问题。
需要完成一个下图的侧边栏效果:
乍一看,很简单嘛,标签列表、弹框,完工!
然后我就写了如下代码:
<ul class="tag radius-8">
//标签
<li class="a"> code </li>
<li class="a"> code </li>
<li class="a"> code </li>
<li class="a"> code </li>
<li class="a"> code </li>
//弹框
<div class="secondary-tag-container radius-8" id="second-tag-div1">
<!-- 弹出层内容区域 -->
<div class="secondary-content radius-8" id="secondary-content1">
<!-- 二级标签 -->
<div class="second-tag">
<li class="b"> code </li>
<li class="b"> code </li>
<li class="b"> code </li>
<li class="b"> code </li>
<li class="b"> code </li>
<li class="b"> code </li>
</div>
<!-- 跳转按钮container -->
<div class="skip-btn-container">
<!-- 跳转按钮 -->
<a class="skip-btn">Done</a>
</div>
</div>
</div>
</ul>
基本样式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
<ul>
<li><a></a></li>
<li><a></a></li>
<li><p><p></li>
</ul>
所以,按照如下设置就能达到我们想要的效果:
.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个元素(也就是最后一个)
}
最终效果:
其实很多时候,并不是没有解决办法或者说简便的办法,只是我们不知道,说明还懂得不够,需要学习来充实自己。