Html 将CSS应用于目标元素的更好方法

如何组织HTML结构和应用CSS。这与其他CSS不冲突

将CSS应用于目标元素的更好方法是什么

---

方式1:

.PARENT_1 .CHILD:first-child {

}

<div class="PARENT_1">
    <div class="COMMON">
        <div class="CHILD"></div>   <!-- Targeted element -->
        <div class="CHILD"></div>
    </div>
</div>

.PARENT_1_CHILD_1 {

}

<div class="PARENT_1">
    <div class="COMMON">
        <div class="CHILD PARENT_1_CHILD_1"></div>  <!-- Targeted element -->
        <div class="CHILD"></div>
    </div>
</div>

.PARENT\u 1.孩子：第一个孩子{
}

---

方式2:

.PARENT_1 .CHILD:first-child {

}

<div class="PARENT_1">
    <div class="COMMON">
        <div class="CHILD"></div>   <!-- Targeted element -->
        <div class="CHILD"></div>
    </div>
</div>

.PARENT_1_CHILD_1 {

}

<div class="PARENT_1">
    <div class="COMMON">
        <div class="CHILD PARENT_1_CHILD_1"></div>  <!-- Targeted element -->
        <div class="CHILD"></div>
    </div>
</div>

.PARENT\u 1\u CHILD\u 1{
}

---

有没有其他方法可以提高CSS的特异性 我可以使用边界元法吗

如果您一次只想将CSS应用于一个元素，请使用该元素的id，例如

如果只针对包装在一个div中的一个元素，您可以像这样在css中写下它：#divname>#something.a（当#something.a是包装div中的第一个元素时）或** 简单地说#divname#something.a-这将在包装器div中的任意位置找到id为的元素

---

希望你明白我的意思。：）

以下是css方法，您可以找到深入的解释：

CSS方法的示例： OOCSS、SMACSS、惯用CSS和BEM

---

IMO，没有更好的办法了。它取决于实现、扩展、重用和读取的容易程度。但最终，它必须提供您想要的预期布局。我的建议是，我将使用方式1，因为如果所有的孩子都是动态的，那么您不能给所有的孩子提供不同的类，所以最好使用方式1并与孩子一起使用，但请记住，这取决于客户/您的条件和需求。

。常见孩子：第一个孩子

用例，或带破折号的小写字母，以便于阅读。频繁使用所有大写字母将减少它通常意味着的强调。