分组（编辑）

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选择器更合适。

Answer 2

最好像你的例子一样使用ID。浏览器更容易获取特定的ID元素，而不是必须找到所有父母，然后是后代......

当有人在单独的帖子中扩展我的答案时，有关此问题的文章：http://www.css-101.org/descendant-selector/go_fetch_yourself.php

ID，类，元素名称 - 它们都是CSS选择器。

使用css选择器或更直接id？

分组（编辑）

2 个答案: