0
点赞
收藏
分享

微信扫一扫

【CSS】CSS 特性 ⑥ ( CSS 优先级 | 经典权重计算示例 2 )


文章目录

  • ​​基础选择器权重​​
  • ​​一、权重计算示例 1​​
  • ​​1、代码示例​​
  • ​​2、权重分析​​
  • ​​3、展示效果​​
  • ​​二、权重计算示例 2​​
  • ​​1、代码示例​​
  • ​​2、权重分析​​
  • ​​3、展示效果​​
  • ​​三、权重计算示例 3​​
  • ​​1、代码示例​​
  • ​​2、权重分析​​
  • ​​3、展示效果​​

基础选择器权重

基础选择器 权重 :

CSS 选择器

选择器优先级 - 权重计算

继承父标签的样式 , ​​*​​ 通配符选择器

0,0,0,0

标签选择器

0,0,0,1

类选择器,链接伪类选择器

0,0,1,0

ID 选择器

0,1,0,0

标签的行内样式 ​​style​​ 属性

1,0,0,0

样式后添加 ​​!important​

权重无穷大


判定标签样式的时候 , 首先看标签有没有被选出来 ,

  • 如果被选出来 , 则看哪个选择器权值大 , 就应用该选择器的样式 ;
  • 如果 出现 多个 被选出来的选择器 权重相同 , 那么根据 就近原则 , 选择一个样式 ;
  • 如果没有被选出来 , 则权重为 0 ;





一、权重计算示例 1



1、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>权重计算示例</title>
<base target="_blank"/>
<style type="text/css">
div p {
color: red;
}
#id1 {
color: red;
}
p.class2{
color: blue;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<p class="class2">
权重计算示例
</p>
</div>
</body>
</html>

分析 文本 " 权重计算示例 " 显示颜色 ;



2、权重分析



权重分析 :

首先 判断 p 标签是否被选择出来 , 发现有两个选择器直接将 p 标签选择出来了 , 下面判断 两个选择器 的权重 ;

  • div p 选择器 由 两个标签选择器组合而成 , 权重为 0,0,01 + 0,0,0,1 = 0,0,0 ,2 ;
  • p.class2 选择器 由 标签选择器 和 类选择器组合而成 , 权重为 0,0,01 + 0,0,1,0 = 0,0,1,1 ;

最终选中的样式是 p.class2 选择器 的样式 , 文本颜色为 蓝色 ;

div p {   
color: red;
}
p.class2{
color: blue;
}

#id1 选择器 选择出了 p 标签的 父标签 div 标签 , 继承样式 的权重为 0, 0,0,0 , 该权重直接被忽略 ;

#id1 {
color: red;
}



3、展示效果



【CSS】CSS 特性 ⑥ ( CSS 优先级 | 经典权重计算示例 2 )_CSS样式权重计算






二、权重计算示例 2



1、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>权重计算示例</title>
<base target="_blank"/>
<style type="text/css">
.class1 .class2 div{
color: blue;
}
div #id3 {
color: red;
}
#id1 div {
color: purple;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<div id="id2" class="class2">
<div id="id3" class="class3">
权重计算示例
</div>
</div>
</div>
</body>
</html>

分析 文本 " 权重计算示例 " 显示颜色 ;



2、权重分析



权重分析 :

首先 判断 最内层的 div 标签是否被选择出来 , 发现 3 个选择器 全部 将 最内层的 div 标签选择出来了 ;

下面开始判断 3 个选择器的权重 ;

  • .class1 .class2 div 选择器 权重 = 类选择器 权重 0,0,1,0 +标签选择器 权重 0,0,0,1 = 0,0,2,1 ;

.class1 .class2 div{  
color: blue;
}

  • div #id3 选择器 权重 = 标签选择器 权重 0,0,0,1 + ID 选择器 权重 0,1,0,0 = 0,1,0,1 ;

div #id3 {  
color: red;
}

  • ID 选择器 权重 0,1,0,0 + 标签选择器 权重 0,0,0,1 = 0,1,0,1 ;

#id1 div { 
color: purple;
}



最后两个 选择器 权重相同 , 那么 根据 就近原则 , 选择最近的样式 ;

这里第三个样式 是距离 结构 最近的样式 , 文本颜色为紫色 ;



3、展示效果



【CSS】CSS 特性 ⑥ ( CSS 优先级 | 经典权重计算示例 2 )_css_02






三、权重计算示例 3



1、代码示例



代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>权重计算示例</title>
<base target="_blank"/>
<style type="text/css">
#id1 #id2{
color: blue;
}
#id1 p.class2{
color: red;
}
div.class1 p.class2{
color: purple;
}
#id1{
color: green !important;
}
</style>
</head>
<body>
<div id="id1" class="class1">
<p id="id2" class="class2">
权重计算示例
</p>
</div>
</body>
</html>

分析 文本 " 权重计算示例 " 显示颜色 ;



2、权重分析



权重分析 :

首先 判断 最内层的 div 标签是否被选择出来 , 发现 3 个选择器 全部 将 最内层的 div 标签选择出来了 ;

#id1 #id2{ 
color: blue;
}
#id1 p.class2{
color: red;
}
div.class1 p.class2{
color: purple;
}

此时开始对比 3 个选择器的权重 :

  • ID 选择器 权重 0,1,0,0 + ID 选择器 权重 0,1,0,0 = 0,2,0,0 ;

#id1 #id2{ 
color: blue;
}

  • ID 选择器 权重 0,1,0,0 + 类选择器 权重 0,0,1,0 + 标签选择器 权重 0,0,0,1 = 0,1,1,1 ;

#id1 p.class2{ 
color: red;
}

  • 类选择器 权重 0,0,1,0 + 标签选择器 权重 0,0,0,1 + 类选择器 权重 0,0,1,0 + 标签选择器 权重 0,0,0,1 = 0,0,2 ,2 ;

div.class1 p.class2{  
color: purple;
}

最终选择第一个选择器的样式 , 文本颜色为蓝色 ;



最后一个选择器 , 虽然有 !important 设置 , 但是该设置针对的是 p 标签的父标签 , 样式继承到 p 标签 , 权重变为 0 了 , 因此该样式被忽略 ;

#id1{
color: green !important;
}



3、展示效果



【CSS】CSS 特性 ⑥ ( CSS 优先级 | 经典权重计算示例 2 )_html_03


举报

相关推荐

0 条评论