html - 什么时候使用 class/id，什么时候直接定位 html 标签

Question

我有（另一个）关于 html/css 最佳实践的问题。我检查了 web 和这个站点，但所有这些都出现在关于何时使用 ID 和何时使用类的文章中。然而，这不是我正在努力解决的问题。

我想知道何时在 html 元素选择器上使用类选择器，反之亦然。

例子：

HTML

<div class="container">
    <p class="nested-p">feefifem</p>
</div>

CSS 选项 1：

.nested-p{...}

CSS选项2：

.container p{...}

在什么情况下哪个选项更可取，为什么？

Answer 1

第一个选项是所有.nested-p类（你可以把这个类放在html ,body , p ,div and aside etc——好吧——你想要的任何东西。）

第二个适用于所有人p（.container是的，没错，只有p）

关于优先级 - 第二个更高（阅读此）

为什么 ？

因为这个：

贴几张图（只是为了强调）

所以第二个看起来像这样：

而第一个看起来像：

Answer 2

如前所述，样式优先级是按特异性排序的。这是一个简单的演示来说明。

HTML

<div class="container">
    <p class="nested-p">Something</p>
</div>

<div class="container">
    <p class="nested-p2">Something</p>
</div>

CSS

.nested-p {
    background: red; /* yeah right, this isn't going to be applied */
}

/* more specific */
.container .nested-p2 {
    background: green;

}

/* less specific */
.container p {
    font-size: 2em; /* will be applied to both nested p*/
    background: blue; /* only applied to the first because it is less specific than the previous declaration */
}

/* even less specific */
.nested-p2 {
    background: blue; /* will not be applied */
    font-size: 4em; /* will be applied, because it's not applied in the more specific class */
}

演示

Answer 3

类选择器用于将特定属性应用于 dom 元素的数量

例子：

<li Class="color">home</li>

<li Class="color">about us</li>

<li Class="color">career</li>

<li Class="color">contact</li>

在CSS中你可以写：

.color{
the properties u wish to apply for all
}

第二个场景是

    <div class="saikiran">

    <p > jsdbkabd</p>
    <p >aksdkd</p>

<ul>

<li>list1</li>

<li>list2</li>

<li>list3</li>

<li>list4</li>

</ul>
</div>

如果你想要前两段特定的风格，你可以使用

.saikiran p{style u wish here}

希望对你有帮助！！！快乐编码