CSS 的继承、优先级、层叠

CSS 的继承

有些元素的样式是可以被子元素继承的，大概包括这些，其中橙色的是文本相关的，蓝色的是列表相关的：

  • azimuth
  • border-collapse
  • border-spacing
  • caption-side
  • color
  • cursor
  • direction
  • elevation
  • empty-cells
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font
  • letter-spacing
  • line-height
  • list-style-image
  • list-style-position
  • list-style-type
  • list-style
  • orphans
  • pitch-range
  • pitch
  • quotes
  • richness
  • speak-header
  • speaknumeral
  • speak-punctuation
  • speak
  • speech-rate
  • stress
  • text-align
  • text-indent
  • text-transform
  • visibility
  • voice-family
  • volume
  • white-space
  • widows
  • word-spacing

优先级

经常会遇到的一个问题，如果多次对一个元素声明样式，到底哪次声明才有效呢？这就要考虑到优先级的问题了。一般来说会对每一次样式的声明都计算一次优先级权值，这个权值比较大的，拥有比较高的优先级，也就是说话最有权力，当然这只是比较简单的说法，具体的规则如下：

  1. 每个选择器都有一个权值，权值越大的优先级越高。
  2. 权值相等时，后出现的覆盖先出现的。
  3. 用 JS 代码指定的样式，相当于增加了一段行内样式。
  4. !important规则的优先级最大（这条规则只适用于支持!important的浏览器，像 IE6 这样的就不支持）

规则一：关于选择器权值的计算

  • A. 行内样式数 * 1000（行内样式就是写在标签的style属性中的样式）
  • B. id 选择器数量 * 100
  • C. 类、伪类选择器和属性选择器数量 * 10
  • D. 标签选择器和伪元素选择器数量 * 1

最终的权值 = A + B + C + D
举个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
  <head>
    <style type="text/css">
        /* #grandparent为ID选择器，权值为100；.parent和.child都是类选择器，权值为10；*/
        /* 权值 = 100 + 10 + 10 = 120*/
        #grandparent .parent .child{
          color: red;
        }
        /* #grandparent为ID选择器，权值为100；.parent是类选择器，权值为20； p是标签选择器，权值为1*/
        /* 权值 = 100 + 10 + 1 = 111*/
        #grandparent .parent p{
          color: blue;
        }
        /* #grandparent为ID选择器，权值为100， .child都是类选择器，权值为10；*/
        /* 权值 = 100 + 10 = 110*/
        #grandparent .child{
          color: green;
        }
    </style>
  </head>
  <body>
    <div id="grandparent">
     <div class="parent">
         <p class="child">Which color?</p>
     </div>
     </div>
  </body>
</html>

所以最终的效果应该是，which color？呈现出红色。

规则二：关于先后覆盖的一个例子

这个例子很简单，就是当权值一样的时候，后面的样式覆盖前面的样式。举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
  <head>
    <style type="text/css">
        #grandparent .child_b{
          color: red;
        }
        #grandparent .child_a{
          color: blue;
        }
    </style>
  </head>
  <body>
    <div id="grandparent">
     <div class="parent">
         <p class="child_a child_b">Which color?</p>
     </div>
     </div>
  </body>
</html>

当然，最后是呈现出蓝色的。

规则三：使用 JavaScript 添加脚本的一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
    <style type="text/css">
    #parent{
        color: red;
    }
    </style>
</head>

<body>
    <div id="parent">
        <p id="child">Which color?</p>
    </div>
    <script type="text/javascript">
        var child = document.getElementById("child");
        child.style.color = "blue";
    </script>
</body>
</html>

最终的结果中，发现 child 元素多出了一行行内样式：

规则四：使用!important覆盖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
    <style type="text/css">
    #parent #child{
        color: red;
    }
    p{
      color: yellow !important;
    }
    </style>
</head>

<body>
    <div id="parent">
        <p id="child" sytle="color: blue">Which color?</p>
    </div>
</body>
</html>

这段代码，即便 ID 选择器和行内样式权值都很大，然而!important还是最有话语权；这样看来!important是不是有种钦定的感觉……