您好,欢迎来到外链网!
当前位置:外链网 » 站长资讯 » 专业问答 » 文章详细 订阅RssFeed

css 重叠,权重相同时,css遵循就近原则

来源:互联网 浏览:124次 时间:2023-04-08

如果选择器不同,会出现优先级问题
标签选择器: 0,0,0,1?
类选择器: ? 0,0,1,0? ??
ID选择器: ? 0,1,0,0
style行内样式表: ?1,0,0,0

实验代码:

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title>权重叠加</title>
?? ??? ?<style>
?? ??? ??? ?/* 以下这个权重为0,0,1,1 */
?? ??? ??? ?.nav a{

? ? ? ? ? ? ? ? ?/*绿色?*/
?? ??? ??? ??? ?color: #00FF7F;
?? ??? ??? ?}
?? ??? ??? ?/* 以下这个权重为0,0,2,0 */
?? ??? ??? ?.nav .first{
?? ??? ??? ??? ?color: red;
?? ??? ??? ??? ?}
?? ??? ??? ?/* 以下这个权重为0,0,1,0 */美国高防vps
?? ??? ??? ?.first{

? ? ? ? ? ? ? /*浅蓝色?*/
?? ??? ??? ??? ?color: #84A2D4;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="nav">
?? ??? ??? ?<a class="first" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">链接1</a>
?? ??? ??? ?<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">链接2</a>
?? ??? ??? ?<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">链接3</a>
?? ??? ??? ?<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">链接4</a>
?? ??? ?</div>
?? ?</body>
</html>

实验效果:

实验分析:

.nav a的权重叠加为0,0,1,1

.first的权重为0,0,1,0

.nav .first的权重叠加为0,0,2,0

.nav .first权重值最高,所以链接1显示红色

83602919