由浅入深css（二）------ CSS选择器

最新推荐文章于 2025-03-10 19:09:15 发布

司马驷马难追

最新推荐文章于 2025-03-10 19:09:15 发布

阅读量407

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/OY_YO00/article/details/115534642

版权

CSS选择器权重优先级浏览器兼容 !important

关键词由优快云通过智能技术生成

前端专栏收录该内容

6 篇文章

订阅专栏

CSS篇之基础篇（二）

前言

这篇文章将讲述css选择器的权重、优先级。

关于css选择器的一些宏观认识。

css选择器都有哪些？

分类	例
id选择器	#id
class选择器	.class
标签选择器	div,h1,p
属性选择器	单个属性：div[attr=val]，多个属性：div[attr1=val1] [attr2=val2]
伪类选择器	:nth-first-child ，:focus等
伪元素选择器	::before，::after，::selection等
通配选择器	*，>, +, ~ 等

css的版本以及兼容

css的大版本共有四个：1.0、2.0、2.1以及最新的3.0。css3作为最新版本，从2011年发布以来，经历了10个年头，才发展到如今的程度。然而不同浏览器之间，仍存一定的兼容问题，需要适配处理。可见，频繁地去发布css新版本，并不意味着就能把css玩得很花。如果普及的时间太长，就相当于无用功。

常用浏览器	占比（%）	兼容前缀
谷歌：Google Chrom	64.72	-webkit- ，如-webkit-transform
火狐：Mozilla Firefox	12.21	-moz- ，如-moz-transform
微软：Internet Explorer	7.71	-ms- ，如-ms-transform
苹果：Safari	6.29	-webkit- ，如-webkit-transform
微软：Microsoft Edge	12.21	-ms- ，如-ms-transform
欧朋：Opera	2.31	-o-，如-o-transform

兼容方案：由于各大浏览器之间，使用的渲染内核有差别，为了整体样式统一，就需要用到兼容方案。常见的兼容方案如下：

在使用css3新增属性的时候加上私有前缀。如在transform、border-radius、transition、box-shadow、border-image、background-size、background-origin、background-clip、keyframes等属性前加上上面提到的私有前缀。
把常用标签的padding和margin统一赋值为0，作为公共样式引入到页面中。如div,p,h1···h6···{margin:0;padding:0;}。网上有很多说法中会用到通配符*{margin:0;padding:0;}，实际上这种一刀切的写法都是在耍流氓，增加浏览器的性能开销，建议用到什么就写什么。
hack。hack的作用和使用与私有前缀类似，都是为了在不同环境中，保持展示一致。但是hack提供了同浏览器不同版本间的向下兼容方案。比如我们说的适配ie，这时候往往适配的不是不通内核之间的差别，更多的是ie自身的高版本到低版本间的向下兼容。这时候可以使用hack，需要详细学习hack的朋友，可以自行查阅一下相关资料。如果不需要兼容ie，往往不需要使用hack。
js动态加载css文件。我们都知道可以通过判断浏览器代理的方式区分浏览器的内核。此方案便是通过判断内核，加载不同的css文件。
在大前端时代，我们使用的开发工具也愈发强大。我们也可以给开发工具安装一些增强插件，或者打包工具中引入插件，对css进行自动添加兼容处理，此时我们只需要写一个标准属性即可。
最后，css兼容不是尽可能多地，把可能会出现兼容问题的样式都一股脑写进去。而是尽可能使用最简洁的代码，达到理想的效果。一刀切，绝不可取。

权重与优先级

一般情况下，权重系数越大，优先级越高。权重系数相同，则后面的覆盖前面。

权重

权重：这一概念，可以简单理解为重要程度。对选择器而言，代表着该选择器的重要程度。而重要程度往往用权重系数来表示。
根据css样式添加方式，可分为：

方式	例	权重系数
内联样式	`<div style="color:red;"></div>`	1,0,0,0
内部样式	在页面head元素内添加style元素，在其内直接添加	按选择器权重系数
外部样式	在页面head元素内添加link元素，通过href属性添加	按选择器权重系数

根据选择器类型，可分为：

选择器	权重系数
id选择器	0,1,0,0
class选择器	0,0,1,0
标签选择器	0,0,0,1
属性选择器 ,伪类选择器,伪元素选择器,通配选择器	0,0,0,0

注：这里的内部样式和外部样式都是通过元素添加，我们都知道在浏览器解析dom的时候是从上到下的，此时如果link在style元素下，那么link内的样式属于后加载，将会覆盖style内的同权重样式。反之，link内的样式将被style内的同权重样式覆盖。

特例：

方式	例	权重系数
! important	p { color:red !important; }	+∞

注：important将无视上面提到的出现顺序和权重系数规则，只要用到important的属性，就可以被认为是无限大。因为使用该属性的情况下，无论其他的选择器或内联样式的权重多大，浏览器都会重新计算，将important属性优先展示。能覆盖它的，只有同权重情况下，在其后面同一属性使用important。或者，在增加权重，无视先后顺序。

优先级

优先级规则是层叠概念的主要内容，浏览器会根据优先级规则来渲染优先级较高的同一属性，优先级低的同一属性将被忽略。
案例一，id、class以及内联样式的优先级:
在这里插入图片描述
案例二，外部样式和内部样式的优先级:
首先，我们增加一个css文件，内容如下：

#case {
	color: yellow;
}

.class {
	color: blue;
}

然后，在页面引入，如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是一个案例</title>
		<link rel="stylesheet" type="text/css" href="./css/test.css"/>
		<style type="text/css">
			#case{
				color: green;
			}
			.class{
				color: brown;
			}
		</style>
	</head>
	<body>
		<p id='case' class="case">案例</p>
	</body>
</html>