什么时候使用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 --放到您想要的任何东西。）

第二个是.container下的所有p （是的，是的，只有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}

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