【HTML】CSS选择器的优先级

最新推荐文章于 2024-04-27 19:27:33 发布

文思月

最新推荐文章于 2024-04-27 19:27:33 发布

阅读量369

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_44366571/article/details/101922715

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

CSS的选择器的优先级

优先级的规则

内联样式： 优先级1000
id选择器： 优先级100
类和伪类选择器： 优先级10
元素选择器： 优先级1
通配：* 优先级0
继承的样式： 没有优先级
选择器的优先级也是可以进行累加的，但是不能累加跨级比较
并集选择器 的优先级是单独计算的的

可以在样式的最后，添加一个 ！important 则此时的该优先级是最高的，优先于所有的优先级
注意： 尽量避免使用！important

a的伪类 的优先级顺序
：link
：visited
：hover
：active
注意： link、visited必须放到hover和active的前面，hover必须放到active的后面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type = "text/css">
    p{
      color: #b3d4fc;
    }
    .ha{
      font-size: 20px;
    }
    #hua{
      background-color: purple;
    }
    *span{
      color: blueviolet;
    }
    a:link{
      color: purple;
    }
    a:visited{
      color: red;
    }
    a:hover{
      color: #b3d4fc;
    }

    a:active{
      color: blue;
    }

  </style>
</head>
<body>
<div>

  <p class = "ha" id = "hua" style="font-size: 50px">我是p标签
  </p>
<p>
  <span>我是span标签</span>
</p>
  <a href="http://www.baidu.com">
    这是我的一个超链接
  </a>
  <br/>
  <br/>
  <a href="http://www.baidu123.com">
    这是我的一个超链接
  </a>

</div>
</body>
</html>

文思月

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【HTML】CSS选择器的优先级

CSS的选择器的优先级优先级的规则内联样式：优先级1000id选择器：优先级100类和伪类选择器：优先级10元素选择器：优先级1通配：* 优先级0继承的样式：没有优先级选择器的优先级也是可以进行累加的，但是不能累加跨级比较并集选择器的优先级是单独计算的的可以在样式的最后，添加一个！important 则此时的该优先级是最高的，优先于所有的优先级注意：尽量避免使...
复制链接

扫一扫

专栏目录