Html 如何在该DIV上添加CSS

我有一个below div结构，我想在第一个.column元素上添加css，而不是它的同级元素

<div class="row" id="team">
   <div class="column">
     <div class="row">
        <div class="column">
        A
        </div>
        <div class="column">
        B
        </div> 
        <div class="column">
        C
        </div>
    </div>
   </div>
</div>

---

我只想首先添加CSS。列，它紧跟在团队div之后。那么我如何才能为它选择一个类。列而不是内部的。列？

您可以使用直接后代/子组合器>，它实际上是说-target直接从团队父div派生的.column类

在下面的示例中，我将在目标.column div周围放置一个边框，而不是在嵌套的子.column div周围

如果还有其他div是particvuar div的同级，那么您也可以使用：first-child伪选择器

#team > .column:first-child {...}

这表示-以.column div为目标，该div是团队div的直接后代和第一个子级。 团队>.column{ 边框：实心1px红色； } A. B C

---

在这种情况下，最具体的选择器是team>.column，在父级和子级之间使用>，以确保同样具有.column类的嵌套div不受影响

在这种情况下，team.column不起作用，因为它还选择嵌套在较低实例中的.column div

顺便说一句：你提到了兄弟姐妹，这有点让人困惑，因为这个元素没有兄弟姐妹

团队>.column{ 背景：黄色； } A. B C

---

好的，我想你可能把你的HTML“父/子”结构搞混了

你可以用

team>.column：第一个孩子{ }