CSS选择器优先级

CSS优先级顺序

下列是一份优先级逐级增加的选择器列表：

  1. 通用选择器

  2. 元素（类型）选择器

  3. 类选择器

  4. 属性选择器

  5. 伪类

  6. ID 选择器

  7. 内联样式

  8.  !important声明的样式

当CSS选择器权重相同，则最后的声明的CSS选择器覆盖靠前的 CSS

多重样式（Multiple Styles）

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级为：(（外部样式）External style sheet /（内部样式）Internal style sheet 按声明先后) <（内联样式）Inline style

示例如下：

<head>
   <style type="text/css">
     
     h3{color:green;}
   </style>
 
   <!-- 外部样式 style.css -->
   <linkrel="stylesheet"type="text/css"href="style.css"/>
   <!-- 设置：h3{color:blue} -->
</head>
<body>
    <h3>welcome sojson.com</h3>
</body>

 

选择器的优先权

选择器优先权

选择器的优先权解释说明

  1. 内联样式表的权值最高 1000。

  2. ID 选择器的权值为 100。

  3. Class 类选择器的权值为 10。

  4. HTML 标签（类型）选择器的权值为 1。

选择器的权值进行计算比较，结果如下：

<html>
  <head>
   <style type="text/css">
      #redP p {
          
          color:#F00;  
      }
 
      #redP .red em {
          
          color:#00F; 
 
      }
 
      #redP p span em {
          
          color:#FF0;
      }
   </style>
  </head>
  <body>
     <divid="redP">
        <pclass="red">red
          <span><em>em red</em></span>
       </p>
        <p>red</p>
     </div>
  </body>
</html>

 

结果：<em> 标签内的数据显示为蓝色

改为：

   <style type="text/css">
      #redP p {
          
          color:#F00;  
      }
 
      #redP .red em {
          
          color:#00F;
 
      }
 
      #redP p span em {
          
          color:#FF0 !important;
      }
   </style>

将显示为黄色

 

posted @ 2018-05-19 16:29  手指乐  阅读(231)  评论(0)    收藏  举报