心血来潮对比了一下CSS中样式优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css 优先级</title>
<!-- 外部样式表 External Style Sheet-->
<link rel="stylesheet" href="style.css">
<style>
/*内部样式表Internal Style Sheet*/
.testClass{color: blue;} /*低于行内样式style="color:red;"*/
/*.testClass{color: blue !important;} */ /*高于行内样式style="color:red;"*/
#testId{color: yellow;} /*高于class低于行内低于!improtant*/
</style>
</head>
<body>
<div class="testClass" style="color:red;"><!-- 内联样式-行内样式 -->
测试Css中的Important优先级
</div>
<div id="testId" class="testClass">
比较ID选择器和Class选择器优先级
</div>
</body>
</html>
总结如下:
!important > 内联样式 > 内部样式表{ID选择器>Class选择器>标签选择器} > 外部样式表