我何时使用class / id以及何时直接定位html标记

Question

我有关于html / css最佳做法的（另一个）问题。我检查了网站和这个网站，但所有关于何时使用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）

关于优先级 - 第二个更高（read this）

为什么？

因为这个：

一些贴图（只是为了强调）

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

而第一个看起来像：

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 */
}

DEMO

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
}

第二个scenorio是

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

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