CSS优先级
一、引入CSS样式的方法
在HTML文件中引入CSS样式有三种方法：
- 外部样式：通过link标签引入CSS样式
- 内页样式：写在HTML页面里面的style标签里面
- 行内样式：写在对应标签的style属性里面
我知道一般情况下使用外部样式，减少代码冗余，同时便于后期维护。
外部样式：
css/common.css
.c1{
background-color: #960606;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
引入外部css样式：
<head>
<meta charset="UTF-8">
<title>css优先级</title>
<link type="text/css" rel="stylesheet" href="css/common.css"/>
</head>
<body>
<div class="c1">好好学习，天天向上</div>
</body>
如下：
二、CSS样式优先级
2.1 从CSS代码存放位置看权重优先级
内嵌样式 > 内部样式表 > 外联样式表。其实这个基本可以忽视之，大部分情况下CSS代码都是使用外联样式表。
.c1{
background-color: red;
font-size: 30px;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css优先级</title> <link type="text/css" rel="stylesheet" href="css/common.css"/> <style> .c1{ font-size: 100px; color: green; } div { font-size: 40px; color: pink; } </style> </head> <body> <div class="c1" style="background: blue; color: yellow">好好学习，天天向上</div> </body> </html>
2.2从样式选择器看权重优先级
important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符。
相当于：
- 第一等：代表内联样式，如: style=””，权值为1000。
- 第二等：代表ID选择器，如：#content，权值为100。
- 第三等：代表类，伪类和属性选择器，如.content，权值为10。
- 第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
.c1{
background-color: red;
font-size: 30px;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
<head> <meta charset="UTF-8"> <title>css优先级</title> <link type="text/css" rel="stylesheet" href="css/common.css"/> <style> #c1{ font-size: 60px; color: black; } .c1{ font-size: 100px; color: green; } div { font-size: 40px; color: pink; } </style> </head> <body> <div class="c1" id="c1" style="background: blue; color: yellow">好好学习，天天向上</div> </body>
2.3 同级选择器，后者覆盖前者
和样式选择器编写顺序有关，越往下优先级越高
.c1{
background-color: red;
font-size: 30px;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
<body>
<div class="c1 c2">好好学习，天天向上</div>
</body>
如下：
