帮助伪类、第一个孩子

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 匹配的内容是

。

使用 .block:first-child 您是说具有 block 类的元素 和 是其父级的第一个子级，而不是说“第一个带有类 block”...它们是独立的选择器，在这里不重叠。那么，由于没有元素匹配这两个条件，因此没有匹配项，这更有意义吗？

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

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