文章目录

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

基础选择器权重

基础选择器 权重 :

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

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

一、权重计算示例 1

1、代码示例

代码示例 :

 

     

权重计算示例

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

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、展示效果

二、权重计算示例 2

1、代码示例

代码示例 :

 

     

权重计算示例

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

2、权重分析

权重分析 :

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

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

• .class1 .class2 div 选择器 权重 = 类选择器 权重 0,0,1,0 + 类选择器 权重 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;}

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

		#id1 div { color: purple;}

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

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

3、展示效果

三、权重计算示例 3

1、代码示例

代码示例 :

 

     

权重计算示例

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

2、权重分析

权重分析 :

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

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

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

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

		#id1 #id2{ color: blue;}

• #id1 p.class2 权重 = ID 选择器 权重 0,1,0,0 + 类选择器 权重 0,0,1,0 + 标签选择器 权重 0,0,0,1 = 0,1,1,1 ;

		#id1 p.class2{ color: red;}

• div.class1 p.class2 权重 = 类选择器 权重 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、展示效果