Question

我有一个输入标签，其中应用了多个css类（例如 c1 ， c2 ）。 c1 包含样式 display:inline-block ，而 c2 包含样式 display:none 。< / p>

是否有任何规则可以选择显示样式？它会从 c1 或 c2 中选择展示属性吗？

Answer 1

唯一适用的规则是cascading，即使对于具有多个类的元素也是如此，这些类都由各个类选择器匹配。

即使你有如下的CSS：

.c1 { display: inline-block; }
.c2 { display: none; }

...选择器.c1和.c2具有相同的特异性，那么最后出现的display声明将优先，即使同一个元素同时具有两个类。< / p>

请注意，由于该元素具有两个类，因此它仍将匹配两个规则，因此任何不重叠的属性仍将正常应用：

.c1 { display: inline-block; font-weight: bold; }
.c2 { display: none; color: red; }

在此示例中，元素将包含粗体和红色文本，但其display将解析为none。

Answer 2

这取决于你写作课程的地方。

CSS使用类的顺序。如果您的第一堂课是display:none，那么如果您在第二堂课中写了display:inline-block，那么它会显示标签。而在反之亦然的情况下，它不会显示标签。

您可以使用此http://jsfiddle.net/eWrpK/2/

Answer 3

是的，这恰好是CSS工作原理的基础。

CSS规则的优先级基于以下几个方面：级联（稍后在代码中声明的更改优先于先前声明的更改），特异性（CSS声明如何特定地抓取目标。例如，声明p { color: red}并不像#body div p.myClass { color: red;}那样具体。使用！important标签也可以覆盖级联，但最好不要使用它，除非你真的需要（例如，如果你继承了系统，没有能力编辑CSS文件。）

在你的例子中，如果c1最后出现，它将覆盖c1。如果它有！important标签，那么C1可以保留其优先级（希望它没有，因为你可以看到如果使用太多就会开始产生问题）。

同一css属性的多个值

3 个答案: