css - Help with a pseudo-class, first-child

Question

I am working on a CMS platform with limited access to the template files and want to try and control some of the layout with pseudo class but no luck yet. Can anyone see what is wrong with this structure and why my pseudo class is being ignored?

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

and i am trying something like this

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

so with this example I would think the stuff block would have a red border and more stuff would have a blue but it is all just blue.

Thanks for any help with this.

Answer 1

它没有被忽略，只是没有任何匹配项:)

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

.block:first-child你说的元素有一个类并且block 是他们父母的第一个孩子，这并不是说“第一个有类block”......它们是独立的选择器并且不会在这里重叠。那么，没有匹配项，因为没有元素同时满足这两个条件，这更有意义吗？

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

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