id：当您想选择一个单一元素

Question

在设计页面的HTML和CSS时，我应该何时使用

img.className

与

.className

与

#idName

或其他一些变种？

是否有指南或建议？

答案摘要

感谢所有回答者 - 这里有一些很棒的东西！

Answer 1

一般来说，您应该与项目要求一样具体。

没有一般规则，这取决于有问题的风格。

很多人会建议你保持最低的特异性，理论上这允许最大程度的级联重用，但这在现实世界的情况下是绝对有毒的，在这种情况下你有多个开发人员都在处理{{{可能看起来像。你不想要的继承造成的污染会导致大规模的膨胀，试图在本地撤销或在重构中失去时间。

我总是提供的最佳指南是尝试以OO术语思考CSS：类选择器或多或少地映射到接口，标签映射到类，ID选择器映射到实例。因此，决定你想要应用的风格是否真的适用于那个东西，所有类似的东西，或任何想要它的东西。

我还强烈建议您在包装器元素上使用高级ID，这样您就可以在时尚名称空间中编写选择器（即.foo，#foo .bar，其中#foo .baz是唯一的一个页面或一组页面设计），它允许您降低交叉设计污染的一定程度的特异性和一般性，使您可以充分利用级联CSS重用。

两全其美。

Answer 2

这取决于预期的语义，并且如其他人所说，尽可能具体。

#idName 表示页面上的唯一元素。好例子是#header和#footer
TAGNAME 用于通用页面样式。
TAG.classname 和 .classname ，用于上述规则的例外/覆盖。

不要忘记使用高级选择器。一个不好的例子：

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    .in_the_menu { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1 class="in_the_menu">My Menu</h1>
</div>

同样可以通过以下方式实现：

<style>
    H1{ font-size: 200%; color: #008; }
    #mainMenu { color: #800; }
    #mainMenu H1 { color: #800; font-size: 150%; }
</style>

<h1>Hello World!</h1>
<div id="mainMenu">
    <h1>My Menu</h1>
</div>

第二个例子摆脱了“mainMenu”div中H1元素的超级“class”属性。这有两个重要的好处：

HTML代码更小更清晰
您不太可能忘记添加类属性

如果你好好照顾CSS，并使用适当的高级选择器，你几乎可以完全省略CSS类。并保留它们仅用于例外/覆盖。

以此示例绘制带标题的框：

#content H2{
   border: 1px solid #008789;
   padding: 0em 1em;
   margin: 0.2em 0em;
   margin-bottom: 1em;
   font-size: 100%;
   background: #cccb79
}

#content H2 + DIV{
   margin-top: -1em;
   border-left: 1px solid #008789;
   border-right: 1px solid #008789;
   border-bottom: 1px solid #008789;
   margin-bottom: 1em;
}

现在，只要您在H2元素中跟DIV #content后，就会有一个不错的方框。其他DIVs和H2单独使用：

<div id="content">

    <h2>Hello Box!</h2>
    <div>Some text</div>

    <div>Some more text</div>

    <div>Some more text</div>

    <h2>And another title</h2>

</div>

如果你正确地遵守这些规则，你几乎不需要课程，并且可以单独使用ID和TAG名称。另外，您的HTML阅读和维护会更好。

Answer 3

你应该使用最能描述你的规则的选择器

id：当您想选择一个单一元素
.classname：当您要为元素设置样式而不管其标记
tag.classname：当您只想设置具有给定类
标记标记标记：当您要为标记的所有子元素设置样式时

Answer 4

您的偏好应该是从最高到最低的顺序：

ID
标签
tag.className
.className

ID选择器很快。标签选择器相当快。纯类选择器很慢，因为浏览器基本上必须询问每个元素并查看每个元素是否都有该类。按ID或标记名称获取元素是浏览器上下文中的“本机”操作。

另外，我发现将CSS选择器设置为尽可能限制是一种好习惯，否则它只会变成一团糟，最终会在CSS规则适用于您没有预料到的情况下获得各种意外后果，这通常是迫使你创建一个类似但不同的选择器，因此没有关于第一个的规则不适用（转化为更混乱）。

基本上如果你知道你是否只在div元素上使用了一个类，那么就这样做

div.className

不

.className

如果您将一个类应用于多个元素，只需列出它们：

h1.selected, h2.selected, h3.selected

而不是

.selected

在实践中，我发现很少需要使用“裸”类选择器或建议这样做的情况。

Answer 5

类选择器

.className

当您要在页面上有多个要应用相同样式的元素时，可以使用此选项。它可以是任何标签元素。因此，在下文中，所有将使用与.className所述相同的样式。

<a href="#" class="className"></a>
<p class="className"></p>
<img src="/path/to/image.png" class="className" />

但你也可以这样限制它：

img.className

通过将标记与样式定义一起放置，您可以说只有当该特定标记使用的类（在本例中为图像）时才使用此样式。

HTML代码如下所示：

<img src="/path/to/image.png" class="className" />

如果页面上的其他元素使用相同的类样式，但不是相同的标记，则不会应用此中设置的样式，它们将采用第一个中提到的更通用的版本示例

重复上面的例子：

<a href="#" class="className"></a>
<p class="className"></p>
<img src="/path/to/image.png" class="className" />

只有图片会采用img.className所列出的样式，而其余图片将采用.className中设置的样式规则。

ID选择器

#idName

当您希望将样式应用于特定元素的一个实例时，可以使用此选项。

您也可以强制它仅应用于某些标记条件，就像您之前使用类定义一样。

p#idName

此示例仅适用于标有ID的段落块：

<p id="idName">

如果你要将id放在另一个元素上，就像这样：

<div id="idName"></div>

然后它不会采用所设定的风格而被忽略。

Answer 6

至于你的两个第一选择器，两者中的第一个将覆盖第二个选择器，因为它更具体。 You can calculate the specificity of a selector

Answer 7

值得注意的是，某些服务器端脚本技术（最着名的是ASP.NET）在使用ID样式时效果不佳。如果您的设计有可能与此类技术一起使用，我建议忘记#id选择器并改为使用tag.className。

原因是，如果标记由服务器端控件输出，ASP.NET实际上会根据许多条件更改最终在HTML中的ID。

Answer 8

我知道这是一个非常古老的问题，但对于那些刚才正在阅读的人来说...... 一般有4类规则： ID规则，类规则，标记规则，通用规则。值得一提的是，类选择器比标记选择器更快。因此，您应该始终按以下顺序使用它们 1. ID选择器
2.类选择器
3.标签选择器
4.通用选择器

在你的情况下，你不应该在课程名称之前使用标签名称。

您可以在此处找到更多信息：Writing efficient CSS

Answer 9

是。您可能希望将来为两个元素使用相同的类名。要清楚明白。这也会阻止类规则重叠到非预期的元素上。

h1.title { font-size:18px; } /* My h1's are big */
 p.title { font-size:16px; } /* My p's are smaller */

  .title { color:#336699; }  /* All titles are blue */

仅在必要时使用ID，每页仅使用一次。

Answer 10

何时使用取决于您要选择的内容。 img.className（type selector + class selector）选择仅类“className”中的IMG元素，而.className（只是类选择器）选择该类中的任何元素以及ID为“idName”的#idName（id selector）任何元素。

但除此之外，选择器都有一个不同的specificity，它会影响该规则的属性覆盖其他规则的顺序。

因此，如果你有一个ID为“idName”的IMG元素，它位于“className”类中：

<img src="…" id="idName" class="className">

规则的属性将按以下顺序应用（特殊性从最高到最低）：

#idName
img.className
.className

但是当您仅为一种特定类型的元素使用特定类时（例如，仅对IMG元素使用“className”），您只能使用.className。

Answer 11

这取决于具体情况：

.error{
  color:red;
}

p.error{
  background-color:yellow;
}

div.error{
  background-color:grey;
}

始终使用 C SS的级联效果。

Answer 12

最好使用每条规则中最不具体的规则。

如何构建CSS将取决于设计的特定需求。

在CSS中使用HTML标记名称，类或ID？

答案摘要

12 个答案:

id：当您想选择一个单一元素

ID

类选择器

ID选择器