css权重

lyning 发布于2019-08-30 15:55 / 2865人阅读

摘要：什么是权重大基础选择器权重指的是大基础选择符的优先级，优先级高的样式会覆盖优先级底的样式，优先级越高说明权重越高，反之亦然。

1、什么是css权重？css6大基础选择器

css权重指的是css6大基础选择符的优先级，优先级高的css样式会覆盖优先级底的css样式，优先级越高说明权重越高，反之亦然。

css6大基础选择器：

a）、id选择器(#box{})
b）、类选择器(.box{})
c）、属性选择器(a[href="http://www.xxx.com"])
d）、伪类和伪对象选择器(:hoevr{}和::after{})
e）、标签类型选择器(div{})
f）、通配符选择器(*{})

2、css权重计算规则

计算css权重是有一定规则的，根据w3c制定的css规范，css权重计算规则如下：

a）、计算选择符中的id选择器的数量
    一个id选择器为一个a，一个a为100
    
b）、计算选择符中的类选择器、属性选择器以及伪类选择器的数量
    一个类选择器、属性选择器以及伪类选择器为一个b，一个b为10
    
c）、计算标签类型选择器和伪对象选择器的数量
    一个标签类型选择器、伪对象选择器为一个c，一个c为1
    
d）、忽略通配符选择器
    通配符选择器忽略不计

如下面这张图就是一个css选择器权重的例子：

如果两个选择符的权重相同，则可依照”就进原则”来判断，最后定义的选择符会被采用。但尽量避免出现这种依靠定义的顺序决定选择符优先级的情况，因为在后续的维护中很难保证定义的顺序不会被打乱。

云服务器 GPU云服务器权重域名低权重解析权重权重

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117205.html

CSS的低权重原则—避免滥用子选择器

摘要：使用子选择器，会增加选择符的权重，的选择符权重越高，样式越不易被覆盖，所以除非确定结构非常稳定，一定不会再修改了，否则尽量使用子选择器。在进过大量实践后，我并不认为多有太大的坏处，相反，与使用子选择器相比，新添加反而跟利于维护。 CSS设置的样式是可以层叠的，如下面[代码1][代码1] span{font-size: 40px;} .test{color:red;} ...

vslam 2019-08-30 12:57 评论0 收藏0
你对CSS权重真的足够了解吗？

摘要：如果两个权重不同的选择器作用在同一元素上，权重值高的规则生效选择器可能会包含一个或者多个与权重相关的计算点，若经过权重值计算得到的权重值越大，则认为这个选择器的权重高。前言 css权重很多人都听过，也了解一些，但是很多人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。日常开发中，或多或少都会遇到css规则不生效的问题，为了让我们能够减少调试css规则的时间，深刻理...

xioqua 2019-08-29 15:27 评论0 收藏0
前端杂谈: CSS 权重 (Specificity)

摘要：前端杂谈权重权重想必大家都听说过一些简单的规则大部分人也都知道较长的权重会大于较短的权重高于但是具体规范是什么浏览器是按照什么标准来判定不同选择器的权重的呢让我们来看一下官方文档是怎么说的第一个关键词官方文档中用特异性来表示一个和其元素的相前端杂谈: CSS 权重 (Specificity) css 权重想必大家都听说过, 一些简单的规则大部分人也都知道: 较长的 css sele...

SimonMa 2019-08-29 17:18 评论0 收藏0
CSS优先级的及其衡量标准CSS权重

摘要：优先级是由权重来作为衡量标准的，权重的计算有一套计算公式，有如下规范使用一个位数的字串来表示级别，从左到右，左边的做大，往右依次递减，且数位之间没有进制，级别之间不可逾越。定义了一个命令，该命令被赋予最大的优先级。一、背景 CSS有三大特性：层叠性、继承性、优先级。而我们在给CSS定义样式的时候，经常出现两个及以上的规则应用在同一元素上，单该元素最终在浏览器呈现的效果是应用的哪个规则呢？这...

ky0ncheng 2019-04-23 13:28 评论0 收藏0
link和@import的区别浅析

摘要：结论就结论而言，强烈建议使用标签，慎用方式。这样可以避免考虑的语法规则和注意事项，避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则，只有导入样式表的作用是提供的标签，不仅可以加载文件，还可以定义连接属性等。我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提...

YFan 2019-08-29 16:19 评论0 收藏0
link和@import的区别浅析

摘要：结论就结论而言，强烈建议使用标签，慎用方式。这样可以避免考虑的语法规则和注意事项，避免产生资源文件下载顺序混乱和请求过多的烦恼。区别从属关系区别是提供的语法规则，只有导入样式表的作用是提供的标签，不仅可以加载文件，还可以定义连接属性等。我们都知道，外部引入 CSS 有2种方式，link标签和@import。它们有何本质区别，有何使用建议，在考察外部引入 CSS 这部分内容时，经常被提...

cgh1999520 2019-08-23 10:53 评论0 收藏0