css权重叠加理解

最新推荐文章于 2023-08-09 21:06:08 发布

谢诗谦

最新推荐文章于 2023-08-09 21:06:08 发布

阅读量717

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/u014387696/article/details/104860043

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

如果选择器不同，会出现优先级问题
标签选择器： 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 */
           .first{

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

实验效果：