我已经做了一些Google搜索,但到目前为止,我还没有找到任何能回答我有关CSS顺序或重要性的问题的信息。
例如,内联优先于外部。得到它了。在外部添加!important可以覆盖内联。而且,从我曾经教过的所有知识来看,较新的样式会覆盖较早的样式。所以:
h1 { font-size: 12pt; } h1 { font-size: 14pt; }
将呈现14pt的字体大小。但这并非总是如此。有时我想定义如下样式:
<div id="content"> <input class="regular" type="text" /> <input class="regular" type="text" /> <input class="long" type="text" />
然后在CSS中:
#content input { width: 50%; } .long { width: 75%; }
但这并不总是有效。在哪里可以看到重要性顺序,因为所有这些都有特定的重要性级别:
input {} #content input {} #content input.regular {} #content input.long input.regular {} input.long {} .regular {} .long {}
我真的真的不喜欢写!important,但是如果我无法弄清楚重要性的顺序,那么有时我必须更改id,class等。
您要搜索的术语是“特异性”。
当您有两个(或多个)CSS块,其选择器选择相同的HTML元素,并且都尝试在该元素上设置相同的CSS属性时,则具有更具体选择器的块将胜出。
(请注意,当两个块的选择器具有 相同的 特异性时, 只有 后来的规则才胜出,如您的示例中的h1s。具有更具体选择器的块中的规则将覆盖带有不太具体的选择器。)
h1