CSS3选择器中容易误解的坑

最新推荐文章于 2022-12-14 11:13:13 发布

ServerWang

最新推荐文章于 2022-12-14 11:13:13 发布

阅读量959

点赞数

分类专栏： CSS探讨

本文链接：https://blog.csdn.net/SuperCoooooder/article/details/53168946

版权

CSS探讨专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS3新增了许多选择器如nth-child/last-child等，这让我们在写样式的时候可以更加灵活，而让我们广大前端程序员熟知的JQ的选择器也正是根据CSS选择器来做的。当然HML DOM也为我们拓展了querySelector与querySelectorAll来使用CSS选择器进行DOM操作，这实在比之前的getElementByXX方便了许多，然而或许之前的CSS选择器会让我们在使用CSS3选择器的时候造成一些误导，因为我就是这么自然而然就被圈进了套路还浑然不觉，前端水太深，我想回农村啊！

开始之前如果你对CSS3选择器还没有太多了解，请移步万能的w3cschool，虽然其相关文档会让你吐血。

根据我们常用的CSS选择器如类选择器来说，我们都知道.header-container{}表示对带有‘header-container’这个类名的元素进行CSS的设置。而加入了CSS选择器会产生什么效果呢？我们首先来看一段使用CSS3选择器操作的CSS代码：

.a:not(:nth-child(2)){
            margin-bottom: 20px;
            width: 100px;
            height: 30px;
            background-color: #00acd6;
        }

DOM如下：

<div class="a"></div>
<div></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>

顺着CSS3之前的选择器的思路来理解，以上样式代码很容易被理解成选择类名为‘a’中不是第二个子元素的元素来设置相应的样式，所以通过DOM元素可以得出符合条件的只有四个，所以应该有四个方块，但是运行结果是这样的：

所有的类名为a的元素都被选择了。如果到了这里你也有些许疑惑，那你跟我一样“翻车”了，哈哈！

其实无论：last-child、：nth-child前面使用了什么修饰（类名或者标签名），其原则都是基于其父元素来选择的，这里：nth-child(2)是指<body>下的第二个子元素，而不是第二个类名为a的元素，.a :not() :nth-child(2)之间相当于并列的‘&&’的关系，只有满足所有条件的才会被选择。所以个人感觉倒着来读更容易理解。

ServerWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3选择器中容易误解的坑

CSS3新增了许多选择器如nth-child/last-child等，这让我们在写样式的时候可以更加灵活，而让我们广大前端程序员熟知的JQ的选择器也正是根据CSS选择器来做的。当然HML DOM也为我们拓展了querySelector与querySelectorAll来使用CSS选择器进行DOM操作，这实在比之前的getElementByXX方便了许多，然而或许之前的CSS选择器会让我们在使用CS
复制链接

扫一扫

专栏目录