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

查看更多