css样式优先级

Posted on | In |

id > class > 元素(类型)选择器

1
2
3
4
5
6
7
// html
<h1 class="h1-class" id="h1-id">这是标题</h1>
// CSS
.h1-class { color: goldenrod; } // 第二优先级
#h1-id{ color: blue; } // 第一优先级
h1{ color: red; } // 第三优先级

指定元素 > 非指定元素

1
2
3
4
5
6
7
8
9
// html 
<div id="test">
  <span>Text</span>
</div>
// CSS
div#test span { color: green } // 第一优先级
span { color: red } // 第三优先级
div span { color: blue } // 第二优先级