Question

我见过一些开发人员写的

HTML：

<div class="test"> some content </div>

CSS：

div.test {
  width:100px.
}

执行div.className而不仅仅是.className的目的是什么。

这是否意味着只有在将类应用于div时才会应用此样式。

那么，<span class='test'>content</span>对上面的css没有'test'效果？如果是这样的话，这是最佳做法吗？这几乎就像样式覆盖不同类型的元素，混合样式与规则！

Answer 1

你是对的。 div.className的特异性高于.className。这意味着几件事：

只有具有className的div才会收到样式，其他元素将不会
div.className的css将覆盖其他css规则，具有较低的特异性，例如.otherClassName

Answer 2

正如你所说style will be applied only when the class is applied to a div。它不适用于任何其他类型的元素。

如果您的课程仅应用于div，则最佳做法是这样做。

虽然如果另一个类作为.test存在，当应用于div.test类的div时，test内的任何样式都会超支。

Answer 3

您可以将类应用于多个dom元素，因此执行div.classname将允许您仅选择具有该类的div元素，而不是选择具有该类的所有dom元素

Answer 4

完全。

这是来自W3C规范：

例如，我们可以将样式信息分配给所有元素 class~ =“pastoral”如下：
*.pastoral { color: green }  /* all elements with class~=pastoral */
or just .pastoral { color: green }  /* all elements with class~=pastoral */ 
以下仅将样式分配给具有class~ =“pastoral”的H1元素：
H1.pastoral { color: green }  /* H1 elements with class~=pastoral */
根据这些规则，下面的第一个H1实例不会有绿色文本，而第二个将：
<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

Answer 5

使用元素名称对类进行前缀将该样式集限制为指定的元素类型。

.test { font-weight:bold; }
span.test { color:#fff; }
div.test { color:#000; }

在这种情况下，使用该类的所有元素都是粗体，SPANS的字体是白色，DIVS的字体是黑色。

Answer 6

div.test选择器将强制执行样式规则仅适用于div类的test元素。

Answer 7

这是否意味着只有在将类应用于div时才会应用此样式？
的是

之前的规则不会对范围有任何影响

这种选择的原因取决于具体情况。通常，任何css样式都要关注给定页面上的特定元素，否则您将拥有

div { .... }

Answer 8

这是一种风格问题。 ;）

它只会应用于div元素。有些人喜欢尽可能缩小范围以帮助减少将来的维护，而其他人发现更开放更容易维护。在很大程度上，这主要取决于个人偏好。

Answer 9

这正是它的含义。这不是好事或坏事，它完全取决于您希望特定类适用的元素。有时您希望将一个类应用于所有元素，有时您希望该类根据该元素具有不同的效果，例如在CSS中定义span.test和div.test。

Answer 10

只有在将类应用于div时才会应用样式？

也有一些性能影响..这里是性能计数器

ID是最快的
标签名称是下一个最快的
没有标记名称的类名称是最慢的

至于哪一个使用，请使用最合适的。如果您的页面上有搜索框，那么使用ID就是最合适的，因为只有一个搜索框。另一方面，表行可能会被类标识，因为有（或可能）不止一个。

大多数人都会注意的是命名类时的语义..阅读此博客可获得一些不错的提示：http://css-tricks.com/13423-semantic-class-names/

抱歉，我想补充一下关于浏览器如何读取CSS选择器的一个重要事项是，他们从右到左阅读它们。这意味着在选择器ul＆gt; li a.home首先解释的是a.home所以避免犯这样的错误

Answer 11

除了维护和个人偏好外，CSS选择器中还有规范要点。总是很了解。

div = 1 point
.className = 10 points
div.className = 1+10 points

得分最高的选择器。有了这个，你可以从非常一般到特定的风格。

css文件中的div.classname

12 个答案: