css-样式优先级算法

1.多重样式优先级

多重样式(Multiple Styles):

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

一般情况下,优先级如下:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

   <style type="text/css">
     /* 内部样式 */
     h3{color:green;}
   style>

    
   <link rel="stylesheet" type="text/css" href="style.css"/>
2.CSS样式优先级算法如何计算?
  1. 内联样式表的权值最高 1000;
  2. ID 选择器的权值为 100
  3. Class 类选择器的权值为 10
  4. HTML 标签选择器的权值为 1

1.css优先级

是由四个级别和各个级别出现的次数决定的,值从左到右,左面的最大,一级大于一级

2.优先级算法

每个规则对应一个初始四位数:0,0,0,0

若是行内样式优先级,则是1,0,0,0,高于外部定义

sjweb

若是ID选择符,则分别加0,1,0,0

若是类选择符,属性选择符,伪类选择符,则分别加0,0,1,0

若是元素选择器,伪类选择器,则分别加0,0,0,1

3.需要注意

!important的优先级是最高的,但出现冲突时则需比较”四位数“

优先级相同时,则采用就近原则

继承得来的属性,其优先级最低

4.实例

body div p{color: green;}--Specificity值为0,0,0,3
Div # sjweb { font-size:12px;}--Specificity值为 0,1,0,1
html > body div [id=”totals”] ul li > p {color:red;}--Specificity值为 0,0,1,6

你可能感兴趣的:(css)