多个CSS样式到底谁起作用

最新推荐文章于 2023-10-11 13:07:49 发布

w狼子

最新推荐文章于 2023-10-11 13:07:49 发布

阅读量1.2k

点赞数

分类专栏： CSS 文章标签： css三大特性 css优先级 !important 谁起作用？

本文链接：https://blog.csdn.net/wlk2064819994/article/details/79919815

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

首先得知道css有三个特性：继承、层叠、优先级。这三个特性在决定选择器谁起作用时有考虑的优先顺序。
具体这三者是怎样影响选择器的请参考权威文档。这里我就只用大白话的形式告诉一些基本常识。

在考虑到底哪个css样式起作用时，先考虑继承，再考虑优先级，最后考虑层叠。
怎样个考虑法呢？
第一步：直接选中优先于间接选中。即选择器直接选中元素时指定的样式优先于继承下来的样式。
第二步：若多个样式都是直接选中时，在判定权重。
第三步：若权重也一样，考虑层叠，即后面的样式覆盖掉前面的样式。

权重：id选择器>类选择器>标签选择器>通配符>浏览器默认
备注： !important会提升指定属性的优先级为最高，但是!important只能用于直接选中(选择器)，不能用于间接选中 (即继承)。
判定优先级(权重)的规则：
1.ID越多，选择器优先级越高。
2.ID数目一样时，看类选择器，类选择器越多，优先级越高。
3.ID数目和类选择器数目一样时，看标签名，标签名越多，优先级越高。
4.ID数目、类选择器和标签选择器一样时，后面的样式会层叠(覆盖)掉前面的样式。
注意点：
①，属性选择器和伪类的权重等同于类名选择器。(但值得注意的是，属性选择器和伪类选择器会伴有一个标签的权重，比如：p["title"]是一个属性权重加上标签权重。)
②，元素和伪元素的权重相同。
③，通配符和结合符的权重为0。(通配符*,结合符是>和空格等后代、子代选择器)
④，继承无权重。(特别注意：权重为0比无权重的权重大。)

⑤权重只能在选择器中才有作用，在继承时是没有用的。即只有在第二步时才需要考虑权重。

举几个例子吧。

例一：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div ul li span{
		color: blue;
	}
	div ul li p{
		color: red;
	}
	</style>
</head>
<body>
	<div class="di">
		<ul class="u">
			<li class="l" title="t">
				<p class="pp" title="t"><span>我是什么颜色？</span></p>
			</li>
		</ul>
	</div>
</body>
</html>
按照步骤来：
1，第一个选择器直接选中，第二个需要继承，所以第一步就决定谁起作用了。答案是blue。

例二：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#id1 .u li p[title] span{
		color: red;
	}
	#id1 .u>li .pp span{
		color: blue;
	}
	</style>
</head>
<body>
	<div id="id1" class="di">
		<ul id="idu" class="u">
			<li class="l" title="t">
				<p class="pp" title="t"><span>我是什么颜色？</span></p>
			</li>
		</ul>
	</div>
</body>
</html>
按照步骤来：
1，两个选择器都是直接选中，所以进入第二步。
2，id数目一样;
   前者一个类加一个属性（相当于两个类，注意点里面的第一点说明了为什么），后者两个类;
   前者2+1个标签名（属性选择器中包含一个标签名），后者两个标签名；通配符和结合符的权重为0（即>和空格一样）。

 所以前者权重更高。答案红色。

例三：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#id1 .u p span{
		color: red;
	}
	#id1 .u li span{
		color: blue;
	}
	</style>
</head>
<body>
	<div id="id1" class="di">
		<ul id="idu" class="u">
			<li class="l" title="t">
				<p class="pp" title="t"><span>我是什么颜色？</span></p>
			</li>
		</ul>
	</div>
</body>
</html>
按照步骤来：
1，两个选择器都是直接选中，所以进入第二步。
2，权重一样，所以进入第三步。
3，后面的层叠前面的。
答案是blue。

w狼子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多个CSS样式到底谁起作用

首先得知道css有三个特性：继承、层叠、优先级。这三个特性在决定选择器谁起作用时有考虑的优先顺序。具体这三者是怎样影响选择器的请参考权威文档。这里我就只用大白话的形式告诉一些基本常识。在考虑到底哪个css样式起作用时，先考虑继承，再考虑优先级，最后考虑层叠。怎样个考虑法呢？第一步：直接选中优先于间接选中。即选择器直接选中元素时指定的样式优先于继承下来的样式。第二步：若多个样式都是直接选中...
复制链接

扫一扫

专栏目录