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

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 类的元素并且 是其父级的第一个子元素，而不是说“第一个具有block 类的元素”。 ..它们是独立的选择器，不会在这里重叠。那么，没有任何元素匹配这两个条件，所以没有匹配项，这更有意义吗？

它不会支持所有浏览器，但你可以使用:nth-child() 或 javascript 来做你想做的事，例如在 jQuery 中它会是：

$("#main .block:first").css({ border: '1px solid red' });