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

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

  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因此绿色。

时间: 2024-10-12 15:04:35

前端学习 -- Css -- 选择器的优先级的相关文章

详解CSS选择器、优先级与匹配原理【转】

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

转------详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标签

详解CSS选择器、优先级与匹配原理

最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常

CSS选择器、优先级与匹配原理

polaris不是前台开发人员,然而作为一个Web开发者,掌握必要的前台技术也是很重要的.说实话,polaris对前台技术还是蛮感兴趣的,只是一直没有用心系统的学过,所以了解的知识有点杂.这篇文章是polaris通过网上的一些知识结合自己的问题做的一些总结,一来当作笔记,二来希望能够对初学者有点帮助. 今天在修改博客时,遇到了一个问题:给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了(呵呵,废话,要不然不会

转载:详解CSS选择器、优先级与匹配原

转载网址:http://polaris1119.javaeye.com/blog/764428 文章就CSS选择器的优先级问题做了一些总结,严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器. 作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的

css选择器的优先级问题

原文:css选择器的优先级问题 当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢? 定义的属性有冲突时,浏览器会选择用那一套样式呢,下面来介绍一下选择器的优先级. 一.选择器的优先级排序 1.   !important 在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式. 2.   行内样式,在style属性里面写的样式. 3.  id选择器 4. class选择器 5. 标签选择器    

CSS选择器、优先级与匹配原理(转)

CSS选择器.优先级与匹配原理 导航

07.css学习-css选择器

<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">/*选择器: 选择器的作用就是找到对应的数据进行样式化. 1.标签选择器: 就是找到所有指定的标签进行样式化. 格式: 标签名{ 样式1:样式2.... } 例子: div{ color:#F00; font-size:24px; } 2. 类选择器: 使用类选择器首先要给html标签指定

css选择器的优先级

版权声明:本文为博主原创文章,未经博主允许不得转载. Css01 一.CSS简介 a)Cascading Style Sheets 层叠样式表(级联样式表) b)是一个文本文件,不需要编译 由浏览器直接执行 c)作用是 定义网页外观 如 字体,背景,等... d)可以配合JavaScript做出绚丽的效果二.CSS 特点 a)精确的定位准确的控制页面的任何元素 b)精细的控制可以做到像素级别的调整 c)样式与内容分离便于维护,便于重用三.使用方法 1.内联 写在标签内的style属性中的叫做内联