CSS 标签权重判断的方式

CSS权重

概念：去计算CSS选择器的优先级大小，即权重，谁的选择器权重大，css就表现谁的属性，条件必须是对同一个html 标签的同一个属性进行设置时才出现优先级问题，才需要去比较优先级，即权重大小。(若权重值一样，谁写在后面就用谁的属性)

方法一： ①加法

原理每种css选择器的权重值不一样，然后那么我们可以将选择器的权重值进行相加，再进行比较
分配，
- id选择器权重值100.
- class选择器权重值10.
- 标签选择器权重值 1.
- 伪类选择器权重值为1.

比较
- 例如：.box#myspan 和 p#myspan
  
  .box#myspan :100+10=110

p#myspan: 1+100=101

body div p span:4

给div设置：

给P标签设置

给span标签设置

组合选择器：

方法二 ②4个0

比较基础选择器的数量来进行权重大小判定
语法（0,0,0,0）
- 第一个0表示是否是行内样式（style属性），是则为1，否0
  
  在body 标签中写style="",才算行内样式
- 第二个0表示拥有id选择器的数量
- 第三个0 表示拥有class选择器的数量
- 第四个0 表示拥有标签选择器的数量
比较规则

1.从第一个0 开始比较两者数量谁大就用谁的，如果数量一样就比较第二个0，依次类推。

eg: ① .box#myspan 和 p#myspan

.box#myspan(0,1,1,0) (√)
p#myspan(0,1,0,1)

② .box #myp #myspan & #myp#myspan

.box #myp #myspan (0,2,1,0) （√）

#myp#myspan （0,2,0,0）

CSS 标签权重判断的方式相关推荐

css标签中判断样式
<button :class = "{border-bottpm:true === item.title}"></button> 注意:这里是判断true是 ...
CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
SEO中HTML标签权重
HTML标签权重分值排列内部链接文字:10分标题title:10分域名:7分 H1,H2字号标题:5分每段首句:5分路径或文件名:4分相似度(关键词堆积):4分每句开头:1.5分加粗或 ...
html5引入外联样式的优先级,CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式最直接最简单的一种,直接对HTML标签使用style="",例如: 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. ...
网页设计的css样式,网页设计引入CSS样式的五种方式_css
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; -} 例如: <TD ...
史上最全的HTML和CSS标签常用命名规则
文件夹主要建立以下文件夹: 1.Images 存放一些网站常用的图片: 2.Css 存放一些CSS文件: 3.Flash 存放一些Flash文件: 4.PSD 存放一些PSD源文件: 5.Temp 存 ...
[css] 请描述css的权重计算规则
[css] 请描述css的权重计算规则权重值计算选择器案例权重值 !important !important Infinity 内联样式 style="-" 1000 ID ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
SEO中HTML标签权重列表
网上流传很久的一份资料<SEO中HTML标签权重>,这里做一份备份. HTML标签权重分值排列内部链接文字:10分标题title:10分域名:7分 H1,H2字号标题:5分每段首句 ...
html中引入css样式表的三种方式,css引用的几种方式是什么？
HTML怎么引用CSS样式?css引用的几种方式是什么?下面本篇文章就来给大家介绍一下在HTML中引用CSS样式的几种方法,希望对大家有所帮助. 1.行内式在HTML标签中,使用style属性设置C ...

CSS 标签权重判断的方式

CSS 标签权重判断的方式相关推荐

最新文章

热门文章