选择器优先级别_html/css_WEB-ITnose-html教程-PHP中文网

选择器优先级别_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:21:46

原创

1154人浏览过

单纯的css文件

当我们创建一个css文档时，经常遇到样式定义冲突的情况，这时遵从以下规则。

当一个HTML元素被定义多重CSS样式时，只有最后一个是可见的。如：
```
p {color: red}p {color: blue}/* 效果为蓝色 */
```
登录后复制
当CSS样式定义在DOM元素的父级节点时，所有的自己元素都会继承该样式。
同一元素存在不同的选择方式时，根据权重进行计算：
- ID属性=100
- class属性=10
- HTML标签=1
使用！important 标记，可以把选择器优先级提高到最前。

先见AI
数据为基，先见未见

95

查看详情

立即学习“前端免费学习笔记（深入）”；

<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}   /* Black color is applied */</style>

登录后复制

在HTML文件中使用CSS

有多种方法可以把CSS文件导入到HTML中，通常在HTML中出现位置的顺序为：

在部分通过导入外部样式在部分直接写入在CSS部分通过 @import 导入外部样式直接定义在HTML标签中的style属性

然而，优先级的顺序确是：

直接定义在HTML标签中的style属性

在部分直接写入的

在CSS部分通过 @import 导入的外部样式

在部分通过导入的外部样式

在以下代码片段中四种导入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>

登录后复制