文章目录
- 1、继承权重示例
- 2、继承权重+标签选择器权重示例
- 3、继承权重+标签选择器权重+类选择器示例
一、继承权重
在下面的 基础选择器 权重 中 , 继承父标签样式 的 权重为 0,0,0,0
CSS 选择器
| 选择器优先级 - 权重计算
|
继承父标签的样式 , * 通配符选择器 | 0,0,0,0
|
标签选择器
| 0,0,0,1
|
类选择器，链接伪类选择器
| 0,0,1,0
|
ID 选择器
| 0,1,0,0
|
标签的行内样式 style 属性 | 1,0,0,0
|
样式后添加 !important | 权重无穷大
|
1、继承权重示例
在下面的结构中 ,
<div>
<p>CSS 继承权重测试</p>
</div>
设置该 div 标签的颜色为红色 , p 标签会继承 div 标签的样式 , 标签中的文本会变为红色 ;
<style>
div {
color: red;
}
</style>
完整代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>继承权重</title>
<base target="_blank"/>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>CSS 继承权重测试</p>
</div>
</body>
</html>
展示效果 :
2、继承权重+标签选择器权重示例
在下面的结构中 ,
<div>
<p>CSS 继承权重测试</p>
</div>
设置该 div 标签的颜色为红色 , p 标签会继承 div 标签的样式 , 标签中的文本会变为红色 ;
由于是继承标签样式 , 该样式 作用于 p 标签的权重为 0,0,0,0 ;
与此同时 设置 p 标签为蓝色 ; 该样式 的 权重为 0,0,0,1 ;
p 标签选择器 的权重 0,0,0,1 , 大于 div 标签继承的样式权重 0,0,0,0 , 最终显示的文本为蓝色 ;
<style>
div {
color: red;
}
p {
color: blue;
}
</style>
完整代码 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>继承权重</title>
<base target="_blank"/>
<style>
div {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>CSS 继承权重测试</p>
</div>
</body>
</html>
效果展示 :
3、继承权重+标签选择器权重+类选择器示例
如果在上面的基础上 , 为 div 标签设置 class 属性 , 为该 class 属性设置颜色值 紫色 ;
类选择器 的权重为 0,0,1,0 ; 这个权重比较高 ;
虽然 类选择器 权重高 , 但是所有选择器 的字标签 继承的权重 , 都为 0,0,0,0 ,
因此该选择器样式的设置 , 影响不到 类选择器 下 的 已经使用 标签选择器 设置 的 p 标签的属性 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>继承权重</title>
<base target="_blank"/>
<style>
div {
color: red;
}
/* 标签选择器 权重 0,0,0,1 */
p {
color: blue;
}
/* 类选择器 权重 0,0,1,0 */
.nav {
color: purple;
}
</style>
</head>
<body>
<div class="nav">
<p>CSS 继承权重测试</p>
</div>
</body>
</html>
展示效果 :
