如何使用CSS选择特定类的第一个示例？

7lrncoxx 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(171)

我有一个类，它在一个页面中出现多次，每次都在它自己的独立div中。我只想选择这个类的第一个示例。
示例：

这里的代码没有很好地说明我的情况。我更新了下面的代码以更好地反映我的实际代码。*

<div class="container">

    <div class="row project-header">
        <div class="col-12">
            <h1><a href="index.html">Heading</a></h1>
            <h2>Subheader</h2>
        </div>
    </div>

    <div class="container sticky-top">
        <div class="row">
            <div class="col-12 line">
                <div>
                    First line
                    <p class="subtitle">Sample Subline</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container sticky-top">
        <div class="row">
            <div class="col-12 line">
                <div>
                    Second line
                    <p class="subtitle">Sample Subline</p>
                </div>
            </div>
        </div>
    </div>

</div>

我尝试使用**. line：first-child**、. line：first-of-type和**. line：nth-of-type（1），但是我了解到. line的每个示例都将被选中，因为它们总是. line**的父示例的第一个子示例。

css

来源：https://stackoverflow.com/questions/75086647/how-do-i-use-css-to-select-the-first-instance-of-a-specific-class

2条答案

按热度按时间

piztneat1#

如果您只想选择其中一个容器中的第一个类，则可以对该特定容器使用**：first-child**，并在其后使用**. line**，如下所示：.container:first-child .line

- 示例：**

.container:first-child .line {
background-color:red;
}

<div class="container">
  <div class="line">
    First Line
  </div>
</div>

<div class="container">
  <div class="line">
    Second Line
  </div>
</div>

赞(0）回复(0）举报 2023-01-14

czq61nw12#

你可以创建不同的类来避免代码之间的混淆，或者使用一点javascript来做同样的事情。
如果您使用以下内容：

document.querySelector(".container") 
document.querySelector(".line")

由于多个项将满足此要求，因此它将只访问这两个类中第一个出现的项。然后，您可以使用各种方法来获取这两个类中所需的更改。

赞(0）回复(0）举报 2023-01-14

我来回答

如何使用CSS选择特定类的第一个示例？

2条答案

相关问题

热门标签

最新问答