何时添加类，何时添加选择器？

Question

鉴于此:

<a class="details" href="#">more&hellip;</a>
...
<input type="submit" value="Gogogo">

说句实话，两者的外观应该非常相似，因为这是设计师想要的。你会这样做吗？

<a class="fancybutton" ...
<input class="fancybutton" ...

.fancybutton { /* ... */ }

这个还是这个？

a.details, .someform input[type="submit"] { /* ... */ }

我遇到了这个问题，不确定该怎么办。似乎需要在一个非常清晰的样式表和没有过多类名的漂亮标记之间做出选择。

你什么时候会选择其中一种？

- Sijmen Mulder

Answer 1

主要选择使用类而不是更加花哨的CSS选择器的原因是兼容性。至少有一个主流浏览器的几个版本仍然无法正确支持更高级的选择器，因此实际上只使用类更容易，因为它们“只是有效的”。

- Joey

---

我同意，但我也想补充一点，选择器也被认为是性能问题。关于简单子选择器性能的有趣文章：http://ajaxian.com/archives/css-child-selector-performance - Matt

Answer 2

IE6不支持input[type=submit]，所以如果我要为其开发，我肯定会选择使用类。

- Soufiane Hassou

Answer 3

就像其他用户所说，使用类是很好的，因为它真正简化了浏览器兼容性的问题（当您尝试使用花哨的CSS 2选择器时会出现问题）。

使用简单的基于类（或ID，如果可能的话）选择器而不是复杂的CSS 2选择器的另一个重要原因是速度。

从谷歌的"优化浏览器渲染"中，描述了为什么应该尝试使用简单的选择器（仅限类/仅限ID选择器非常简单）：

后代选择器效率低下，因为对于每个与关键字匹配的元素，浏览器还必须遍历DOM树，评估每个祖先元素，直到找到匹配项或达到根元素。关键字越不具体，需要评估的节点数量就越多。

子选择器和相邻选择器效率低下，因为对于每个匹配元素，浏览器都必须评估另一个节点。对于规则中的每个子选择器，它变得更加昂贵。同样，在性能方面，虽然效率低下，但它们仍然比后代选择器更可取。

关于来自同一篇文章的类选择器而不是后代选择器的特定说明：

Use class selectors instead of descendant selectors.

For example, if you need two different styles for an ordered list item and an ordered list item, instead of using two rules:

ul li {color: blue;}
ol li {color: red;}

You could encode the styles into two class names and use those in your rules; e.g:

.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

If you must use descendant selectors, prefer child selectors, which at least only require evaluation of one additional node, not all the intermediate nodes up to an ancestor.

- JasonWyatt

Answer 4

我通常使用类(class)，因为在浏览器中，它得到了比属性选择器更广泛的支持。在绝大多数人都拥有支持CSS属性选择器的浏览器之前，我会继续在这种情况下使用类。

- Sekhat

Answer 5

我认为，在一些有问题的浏览器中，答案是具体性。要考虑样式应用的广度，并使用足够具体的定义来消除在 Web 应用程序范围内的歧义。

此外，不要害怕在元素上使用多个样式类来开发分层的呈现方法，例如 class="blackborder smalltext centred"。

- Lazarus