理解CSS声明

Question

当我宣布类似

的内容时

<div class="t-widget t-treeview t-reset" id="TreeView">

我是说三个班级（即t-widget，t-treeview或t-reset）适用？

所以：

.t-widget
{
   ...
   /* Styles apply */
}

.t-treeview
{
   ...
   /* Styles apply */
}

.t-reset
{
   ...
   /* Styles apply */
}

Answer 1

是的，它们都适用。由于它们的特殊性是相同的，后面的声明会覆盖早期的声明。

Answer 2

是的，请记住，CSS意味着级联样式表

Answer 3

<div class="t-widget t-treeview t-reset" id="TreeView">

它提到所有3个类按顺序应用。这是t-widget的样式首先应用，t-treeview second和t-rest最后一个在这个例子中。 IOW后者不仅在序列中稍后应用，而且还覆盖了早期的样式。

Answer 4

在slebetmans答案的基础上，你也可以使用它们的组合。所以

.widget.treeview { }

只匹配widget和treeview类的元素

Answer 5

这意味着您将从每个类中获取所有样式并将其应用于该元素。

如果特异性正确，该元素将恢复所有声明的样式。

你可以在这里阅读一些关于它的好东西=＆gt; http://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

您还可以创建以下选择器：

.t-widget.t-treeview.t-reset { ... }
.t-widget.t-reset { ... }

只要它们有效，您使用的类就无关紧要。具有组合声明的类的元素将接收这些样式。