css

css 样式优先级的重新认识

可能一开始接触web前端的开发，没有对css样式有特别深入的了解。只是笼统的知道行内样式的权值最高，其次是ID选择器的优先级>class选择器>html选择器，今天抽时间看了下相关的文章，原来关于样式的权值不是那么简单，给大家分享下心得

样式嵌入分类

  1. 外部样式表
  2. 内部样式表（位于 标签内部）
  3. 内联样式（在 HTML 元素内部）

一般情况下优先级的顺序如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
但是不是所有的都遵循这个规则？大部分是，但也有特例，比如：
「如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。」
示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <title>样式覆盖测试</title>    
    <style type="text/css">    
      /* 内部样式 */    
      h1{color:green;}    
    </style>    
    <!-- 引入外部样式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 设置：h1{color:blue;} -->    
</head>    
<body>    
    <h1>猜猜我是什么颜色？</h1>    
</body>

答案是 blue

查看更多