html - 使用css选择器还是更直接的id？

Question

这更像是一个概念性问题。最近我发现自己对这种 html 更有信心(示例)

<div id="mainCont">
  <div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div>
  <div id="mainContSecond">Other Text</div>
</div>

所有重要的标签都标有 ID，您可以轻松地写下 css:

#mainContFirst {} etc

这是一种不好的做法吗？我应该只使用 css 选择器吗？这比使用选择器快吗？

谢谢

分组(编辑)

现在好了，那些应该具有相同样式的元素呢？

例如，在每个 div 中，第二个 <span>应该有 font-size:10px;最好这样:

<div>
   text text <span></span> <span id="firstDivSpan"></span>
</div>
 <div>
   text text <span></span> <span id="secondDivSpan"></span>
</div>

然后是 css:

#firstDivSpan, #secondDivSpan {...}

还是这样？

 <div>
   text text <span></span> <span id="firstDivSpan" class="commonStyle"></span>
</div>
 <div>
   text text <span></span> <span id="secondDivSpan" class="commonStyle"></span>
</div>

.commonStyle{...}

什么更好？

Answer 1

ID 选择器是最快的。这根本不是坏习惯；您只是假设您的网页上只有一个元素具有该 ID。

也就是说，您不应该出于渲染性能等蹩脚的原因滥用 ID。使用 ID 来标记真正独特的元素，而不是标记所有元素，这样您就可以忘记后代组合器、类、组等东西。让 CSS 如此强大的是其他选择器，而不仅仅是 ID 选择器。

重新提问编辑:在这种情况下没有任何更好。除了性能问题(因为它们根本不重要)，它在很大程度上取决于选择器的含义。

如果您的样式适用于具有 .commonStyle 类的任何元素，则使用类选择器。如果您只想定位这两个特定的 span 而不管类，那么 ID 选择器更合适。