CSS权重和优先级

最新推荐文章于 2024-01-15 15:26:26 发布

ChangeNone

最新推荐文章于 2024-01-15 15:26:26 发布

阅读量235

点赞数

分类专栏： Web 文章标签： css html css3

本文链接：https://blog.csdn.net/ChangeNone/article/details/104828041

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS权重和优先级

第一题

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>第1题</title>
		<style type="text/css">
			div div{ 
				color:blue;
			}
			div{
				color:red;
			}
		</style>
	</head>
	<body>
		<div>
			<div>
				<div>
					试问这行字体是什么颜色的？
				</div>
			</div>
		</div>
	</body>
</html>

第二题

<!DOCTYPE>
<html>
	<head>
		<title>第2题</title>
		<style type="text/css">
			#father{
				color:red;
			}
			p {
				color:blue;  
			}
		</style>
	</head>
	<body>
		<div id="father">
			<p>试问这行字体是什么颜色的？</p>
		</div>
	</body>
</html>

第三题

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta content="text/html;charset=UTF-8">
        <title>Document</title>
        <style type="text/css">
            div div div div div div div div div div div div{    
                color:red;
            }
            .me {  
                color:blue;
            }
        </style>
    </head>
    <body>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div>
                                                    <div class="me">
                                                        试问这行文字是什么颜色的
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

第四题

<!DOCTYPE>
<html>
	<head>
		<meta content="text/html;charset=utf-8" />
		<title>第4题</title>
		<style type="text/css">
			div p {   
				color:red;
			}
			#father {
				color:red;
			}
			p.c2{    
				color:blue;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

第五题

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title>Document</title>
		<style type="text/css">
			.c1 .c2 div{  
				color: blue;
			}
			div #box3 {  
				color:green;
			}
			#box1 div { 
				color:yellow;
			}
		</style>
	</head>
	<body>
		<div id="box1" class="c1">
			<div id="box2" class="c2">
				<div id="box3" class="c3">
					文字
				</div>
			</div>
		</div>
	</body>
</html>

第六题

<!DOCTYPE>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title>第6题</title>
		<style type="text/css">
			#father #son{ 
				color:blue;
			}
			#father p.c2{ 
				color:black;
			}
			div.c1 p.c2{  
				color:red;
			}
			#father{
				color:green !important;
			}
		</style>
	</head>
	<body>
		<div id="father" class="c1">
			<p id="son" class="c2">
				试问这行字体是什么颜色的？
			</p>
		</div>
	</body>
</html>

详解

CSS优先级（重点）

概念：

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，此时，
- 选择器相同，则执行层叠性
- 选择器不同，就会出现优先级的问题。

1). 权重计算公式

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）

标签选择器	计算权重公式
继承或者 *	0,0,0,0
每个元素（标签选择器）	0,0,0,1
每个类，伪类	0,0,1,0
每个ID	0,1,0,0
每个行内样式 style=" "	1,0,0,0
每个!important 重要的	∞ 无穷大

值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity（特殊性）
div {
color: pink!important;
}

2). 权重叠加

我们经常用交集选择器，后代选择器等，是有多个基础选择器组合而成，那么此时，就会出现权重叠加。

就是一个简单的加法计算

div ul li -------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -------> 0,0,1,1
.nav a ------> 0,0,1,1

注意：

数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。

3). 继承的权重是0

这个不难，但是忽略很容易绕晕。其实，我们修改样式，一定要看该标签有没有被选中。

1）如果选中了，那么以上面的公式来计权重。谁大听谁的。
2）如果没有选中，那么权重是0，因为继承的权重为0.

答案：

第一题：blue
第二题：blue
第三题：blue
第四题：blue
第五题：yellow
第六题：blue

*声明：本文于网络和作者自己整理，版权归原著所有，如侵犯权益，请联系作者删除。

ChangeNone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS权重和优先级

CSS权重和优先级第一题第二题第三题第四题第五题第六题详解CSS优先级（重点）1). 权重计算公式2). 权重叠加3). 继承的权重是0第一题<!DOCTYPE><html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <...
复制链接

扫一扫