search

Home  >  Article  >  Web Front-end  >  选择器优先级别_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:21:46957browse

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

在HTML文件中使用CSS

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

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

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

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

在以下代码片段中四种导入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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：WebStorm 2016.1.2 EAP 发布_html/css_WEB-ITnoseNext article：jQuery对数组的操作_html/css_WEB-ITnose

Related articles

See more