前端学习 -- Css -- 选择器的优先级-阿里云开发者社区

开发者社区> 西北野狼> 正文

前端学习 -- Css -- 选择器的优先级

简介: 当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。 优先级的规则 内联样式 , 优先级 1000 id选择器,优先级 100 类和伪类, 优先级 10 元素选择器,优先级 1 通配* , 优先级 0 继承的样式,没有优先级 当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。
+关注继续查看

当使用不同的选择器,选中同一个元素时并且设置相同的样式时,这时样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器的优先级(权重)决定优先级高的优先显示。
优先级的规则

  1. 内联样式 , 优先级 1000
  2. id选择器,优先级 100
  3. 类和伪类, 优先级 10
  4. 元素选择器,优先级 1
  5. 通配* , 优先级 0
  6. 继承的样式,没有优先级


当选择器中包含多种选择器时,需要将多种选择器的优先级相加然后在比较,但是注意,选择器优先级计算不会超过他的最大的数量级,如果选择器的优先级一样,则使用靠后的样式。

并集选择器的优先级是单独计算
div , p , #p1 , .hello{}

可以在样式的最后,添加一个!important,则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,但是在开发中尽量避免使用!important

分别测试下这6种情况:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .p1 {
                background-color: yellow;
            }
            
            p {
                background-color: red;
            }
            
            * {
                font-size: 50px;
            }
            
            p {
                font-size: 30px;
            }
            
            #p2 {
                background-color: yellowgreen;
            }
            
            p#p2 {
                background-color: red;
            }
            
            .p3 {
                color: green;
            }
        </style>
    </head>

    <body>

        <p class="p1 p3" id="p2" style="background-color: orange;">我是一个段落
            <span>我是p标签中的span</span>
        </p>

    </body>

</html>

background-color:

p#p2 :继承的样式,没有优先级;

*p:通配* 优先级0;

p :元素选择器,优先级 1;

.p1:类和伪类, 优先级 10;

p2 优先级 100;

style="background-color: orange;"优先级1000;

因此背景颜色为 organge。

color:

p3:因为只有这一个设置color因此绿色。

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端 css+js实现返回顶部功能
描述:        本文主要是讲,通过css+js实现网页中的【返回顶部】功能。   实现代码: HTML: 1 2 返回顶部 3   CSS: 1 /* return top */ 2 #btnTop { 3 display: none; 4 position:...
1131 0
前端工程师的mysql笔记
背景 最近常参与后台php项目,虽说刚毕业时自学过一阵子php和mysql,不过长时间没用也忘差不多了,于是把mysql再温习一遍,前端同学也可以一起学习下! mysql安装以及操作 安装 brew install mysql 启动 $: mysql.
848 0
PostgreSQL 参数优先级讲解
PostgreSQL 参数优先级讲解
624 0
前端学习 -- 长度单位
长度单位  像素 px  - 像素是我们在网页中使用的最多的一个单位, 一个像素就相当于我们屏幕中的一个小点,我们的屏幕实际上就是由这些像素点构成的但是这些像素点,是不能直接看见。 - 不同显示器一个像素的大小也不相同,显示效果越好越清晰,像素就越小,反之像素越大。
606 0
前端学习 -- Css -- 文本标签
em和strong - 这两个标签都表示一个强调的内容, em主要表示语气上的强调,em在浏览器中默认使用斜体显示 strong表示强调的内容,比em更强烈,默认使用粗体显示 DOCTYPE html> 今夕何夕兮,搴舟中流。
774 0
前端学习 -- Css -- 字体
设置字体颜色,使用color来设置文字的颜色 设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能。
695 0
+关注
西北野狼
擅长Android ,J2EE开发 博客园地址:http://www.cnblogs.com/androidsuperman/p/7834762.html github地址: https://github.com/soyoungboy
463
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载