Question

我想在div中选择第一个子元素，而不管元素（如果它也是div，那么它也是p或其他元素）也在我的样式表（CSS）中。

<div class="mainInterview">
    <p></p>
    <div class="gallery"></div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="gallery"></div>
    <div class="gallery"></div>
    <p></p>
    <p></p>
    <div class="gallery"></div>
    <div class="gallery"></div>
    <p></p>
    <p></p>
    <p></p>
</div>

或者代码可能是

<div class="mainInterview">
    <div class="gallery"></div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div class="gallery"></div>
    <div class="gallery"></div>
    <p></p>
    <p></p>
    <div class="gallery"></div>
    <div class="gallery"></div>
    <p></p>
    <p></p>
    <p></p>
</div>

如果直接的第一个元素如果.gallery那么我只需要写一些样式。任何人都可以帮我实现这个目标吗？

Answer 1

您应该使用：first-child选择器而不指定所选子项的元素类型，向其添加库类选择器：

.mainInterview > :first-child.gallery {
    background-color: yellow;
}

这是一个Tryit编辑器示例： https://www.w3schools.com/code/tryit.asp?filename=FJDQK638Z9JG

Answer 2

另一种方式：

.mainInterview > div:nth-of-type(1){
    font-weight: bold;
    background-color: red;
}

如果第一个元素不是p，请选择div中的第一个Div元素

2 个答案: