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

Question

如何组织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>

方式2：

.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>

改善 CSS特异性的其他任何方式？
我可以使用 Bem Methodology 吗？

Answer 1

1. 如果您想一次只将CSS应用于一个元素，请使用该元素的id，例如
2. 如果你只针对div中包含的一个元素，你可以在css中将其写下来：#divname＆gt; #thing.a（当＃something.a是包装器div中的第一个元素时）或** 只需#divname #thing.a - 这将在包装器div中的任何位置找到具有id的元素。

希望你明白这一点。 :)

Answer 2

以下是css方法论，您可以找到深度解释：

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

Title CSS Simple Approach CSS Class Naming