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代码都是使用外联样式表。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.c1{
background-color: red;
font-size: 30px;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.c1{
background-color: red;
font-size: 30px;
color: white;
}
.c2{
font-size: 50px;
color: black;
}
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>
如下: