Question

我正在使用CMS平台，对模板文件的访问权限有限，并希望尝试使用伪类控制某些布局，但还没有运气。任何人都可以看到这个结构有什么问题，为什么我的伪类被忽略了？

<div id="main">
    <div class="someRandomDiv"></div>
    <div class="block">
    stuff
    </div>
    <div class="block">
     more stuff
    </div>
</div>

我正在尝试这样的事情

#main .block {border: 1px solid blue}
#main .block:first-child {border: 1px solid red}

所以在这个例子中，我认为东西块会有一个红色的边框，更多的东西会有蓝色，但它只是蓝色。

感谢您提供任何帮助。

Answer 1

它没有被忽视，没有任何匹配：）

我意识到这有点违反直觉，但:first-child字面意思是父母的第一个孩子，而不是父母类型的，所以在代码中匹配:first-child的唯一内容是<div class="someRandomDiv"></div>。

对于.block:first-child，你说的是block 和类的元素是他们父母的第一个孩子，它不是说“第一个有类{{ {1}}“......他们是独立的选择者，在这里不重叠。那么，没有匹配，因为没有元素匹配两个条件，这更有意义吗？

它不支持所有浏览器，但您可以使用:nth-child()或javascript来执行您想要的操作，例如在jQuery中它将是：

block

帮助一个伪班，第一个孩子

1 个答案: