选择器优先级别
2016-04-07 本文已影响91人
Kou_Guandong
单纯的CSS文件
当我们创建一个CSS文档时，经常遇到样式定义冲突的情况，这时遵从以下规则。
- 当一个HTML元素被定义多重CSS样式时，只有最后一个是可见的。如：
p {color: red}
p {color: blue}
/* 效果为蓝色 */
- 当CSS样式定义在DOM元素的父级节点时，所有的子级元素都会继承该样式。
- 同一元素存在不同的选择方式时，根据权重进行计算，权重越高越优先：
- ID属性=100
- class属性=10
- HTML<>标签=1
- 无论何种情况，使用 ！important 标记，可以把选择器优先级提高到最前。
<body>
<p id="target" class="target">Hello World</p>
</body>
<style>
p#target {color: black !important}
p#target {color: red}
p.target {color: blue}
p {color: tomato}
/* 最终效果为黑色 */
</style>
在HTML文件中使用CSS
有多种方法可以把CSS文件导入到HTML中，通常在HTML中出现位置的顺序为：
- 在<head>部分通过<link>导入外部样式
- 在<head>部分直接写入<style>
- 在CSS部分通过 @import 导入外部样式
- 直接定义在HTML标签中的style属性
然而，优先级的顺序确是：
- 直接定义在HTML标签中的style属性
- 在<head>部分直接写入的<style>
- 在CSS部分通过 @import 导入的外部样式
- 在<head>部分通过<link>导入的外部样式
在以下代码片段中四种导入CSS的方法都使用了，最终呈现出的效果，是级别最高的p标签中的style定义。除非，有 !important 在其他定义方式中出现。
<!DOCTYPE html>
<html>
<head>
/* Link in head */
<link rel="stylesheet" href="css/style.css"/>
/* Style tag in head */
<style>
p {color: tomato}
</style>
/* @import in CSS area */
<style>
@import url("css/style.css");
</style>
</head>
<body>
/* Style attribute in HTML element */
<p style="color: red">Hello World</p>
</body>
</html>
