1. 同一元素引用了多个样式时，排在后面的样式属性的优先级高

例如，下面的 div，同时引用了 [.default] 和 [.user] 中的样式，其中 [.user] 样式中的 width 属性会替换 [.default] 样式中的 width 属性。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

        .default{

           width: 100px; /* 定义 width 属性 */

           height: 100px;

           background-color: #B6E0AE;

           margin: -50px 0 0 -50px;

           position: absolute;

           top: 50%;

           left: 50%;

        }

        .user{

           width: 150px; /* 这里 width 的值替换了前面 width 的值 */

        }

    </style>

</head>

<body>

    <div class="default user"></div>

</body>

</html>

2. 样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器 > 标签选择器

例如，下面的 div 即获取 id 选择器对应的样式，又获取 class 选择器对应的样式，其中

id 选择器 [#mydiv] 的样式属性（width），优先于 class 选择器 [.user] 中的样式属性（width）；

class 选择器 [.user] 中的样式属性（background-color），优先于标签选择器 [div] 中的样式属性 （background-color）。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

        #mydiv{

           width: 100px;

           height: 100px;

           margin: -50px 0 0 -50px;

           position: absolute;

           top: 50%;

           left: 50%;

        }

        .user{

           width: 500px; /* #mydiv 中已定义 width 属性，这里的 width 无效 */

           background-color: #B6E0AE;

        }

        div{

           background-color: #000000; /* .user中已定义 background-color 属性，这里的 background-color 无效 */

        }

    </style>

</head>

<body>

    <div id="mydiv" class="user"></div>

</body>

</html>

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;img src="https://pic2.zhimg.com/270cbc3ebaf61b53885a2cb02b8498d5_b.png" data-rawwidth="410" data-rawheight="298" class="content_image" width="410"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

3. 标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低

例如，下面 id = "child" 的子 div，部分样式继承自 id = "parent" 的父 div，而其新定义的样式属性又会覆盖父元素的样式属性。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

        #parent{

           width: 100px;

           height: 100px;

           background-color: #B6E0AE;

           margin: -50px 0 0 -50px;

           position: absolute;

           top: 50%;

           left: 50%;

        }

        #child{

            /* 继承了父元素的 width 等属性 */

            height: 60px;  /* 这里的 height 覆盖了父元素的 height 属性 */

            background-color: #A7CCEF; /* 这里的 background-color 属性覆盖了父元素的 background-color 属性 */

        }

    </style>

</head>

<body>

    <div id="parent">

        <div id="child" style="font-size:12px;">子元素</div>

    </div>

</body>

</html>

4. 带有 !important 标记的样式属性的优先级最高

例如，下面的 div 的样式属性中，带有 !important 标记的样式属性（width）会替换其他的（width）。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

        #parent{

           width: 100px;

           height: 100px;

           background-color: #B6E0AE;

           margin: -50px 0 0 -50px;

           position: absolute;

           top: 50%;

           left: 50%;

        }

        #child{

            /* 继承了父元素的 width 等属性 */

            height: 60px;  /* 这里的 height 覆盖了父元素的 height 属性 */

            background-color: #A7CCEF; /* 这里的 background-color 属性覆盖了父元素的 background-color 属性 */

        }

        div{

            width: 150px !important; /* 此时的 width 属性优先级最高，不会被其他的 width 属性覆盖 */

        }

    </style>

</head>

<body>

    <div id="parent">

        <div id="child" style="font-size:12px;">子元素</div>

    </div>

</body>

</html>

5. 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式

例如，下面的 div 的样式有多个来源，其中内联样式 font-size 的优先级最高，外部样式中的 width 属性，优先级比内部样式中的 width 属性的优先级要低。

/* main.css 文件 */

#parent {

    width: 300px;

}
<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <link type="text/css" rel="stylesheet" href="main.css" />

    <style type="text/css">

        #parent{

           width: 100px;  /* 这里的 width 属性替换了 main.css 文件中定义的 width 属性 */

           height: 100px;

           background-color: #B6E0AE;

           margin: -50px 0 0 -50px;

           position: absolute;

           top: 50%;

           left: 50%;

        }

        #child{

            height: 60px; /* 覆盖父元素的 height 属性 */

            background-color: #A7CCEF;

            font-size: 50px;

        }

    </style>

</head>

<body>

    <div id="parent">

    <!--内联样式 font-size 优先级比 <style></style> 中的 font-size 优先级高 -->

    <!--chrome 浏览器默认的 font-size 至少是 12px，即使这里设置为小于 12px，浏览器还是显示 12px-->

        <div id="child" style="font-size:20px;">子元素</div>

    </div>

</body>

</html>

附：如何用 jQuery 选择器来选择 class 中有多个值的元素，如 class="a b c" 的元素？

下面 div 的 class 属性中包含多个值，可以按以下方式来查找这样的 div：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        function myClick() {

            //按属性选择器的方式来选择

            $("[class='ancestor parent child']").css("color", "red");

            //直接列出各个类名来选择（顺序可以互换）

            $(".ancestor.parent.child").css("color", "red");

            //打乱顺序后，也可以找到同样的元素

            $(".child.parent.ancestor").css("color", "red");

            //注意：选择器中间不能随便加空格（空格后面的元素表示后代元素），如：

            $(".ancestor .parent .child").css("color", "red"); //可以找到 div

            $(".child .parent .ancestor").css("color", "red"); //找不到任何元素

            //依次过滤来选择

            $(".ancestor.parent").filter(".child").css("color", "red");

            $(".ancestor").filter(".child").css("color", "red");

            //也可以用 find() 来查找满足条件的 所有的后代元素

            $(".ancestor.parent").find(".child").css("color", "red");
            $(".ancestor").find(".child").css("color", "red");

        }

    </script>

</head>

<body>

    <form action="http://www.bing.com/search">

        <div>

            <div class="ancestor parent child">

                <div class="child">test0</div>

                <span class="child">test1</span>

            </div>

            <div class="ancestor">test2</div>

            <div class="parent">test3</div>

            <div class="child">test4</div>

            <input type="button" onclick="myClick();" value="点击" />

        </div>

    </form>

</body>

</html>

注：《HTML5程序设计》这本书上有更详细的介绍

CSS 样式的优先级的更多相关文章

  1. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  2. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  3. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  4. Web前端面试指导(十三)：css样式的优先级是怎么样的？

    题目点评 CSS样式的优先级规则给人的感觉总是摸不透,更不用说怎么去表达了,在网络上流传着很多版本,描述的都很复杂也不全面,看了之后还是不满意.我来给大家介绍一个比较系统.全面有比较容易记住的规则吧! ...

  5. 学习了解CSS3发展方向和CSS样式与优先级

    通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...

  6. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

  7. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  8. CSS样式表优先级

    使用CSS样式表一共有2种方式:内部和外部,其中内部分为行内样式和嵌入式,外部分为导入式和链接式. 如果需要在不同的方式中设定同一个属性的时候,样式的优先级别就出现了. 测试代码如下: red.css ...

  9. css样式引入优先级？

    css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...

随机推荐

  1. Codeforces Round #263 (Div. 1)

    B 树形dp 组合的思想. Z队长的思路. dp[i][1]表示以i为跟结点的子树向上贡献1个的方案,dp[i][0]表示以i为跟结点的子树向上贡献0个的方案. 如果当前为叶子节点,dp[i][0] ...

  2. SVM学习（续）

    SVM的文章可以看:http://www.cnblogs.com/charlesblc/p/6193867.html 有写的最好的文章来自:http://www.blogjava.net/zhenan ...

  3. Android属性动画完全解析(上)，初识属性动画的基本用法

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系 ...

  4. 加强型无穷集合：InfiniteList<T>，可指定遍历方向和偏移量，只要集合有元素并且偏移量不为 0，将永远遍历下去。

    主类: public class InfiniteList<T> : IEnumerable<T> { public List<T> SourceList { ge ...

  5. 关于BS响应式的网站建设

    一.首先是导航 html部分: <!-- 导航 --> <nav class="navbar navbar-default navbar-fixed-top"&g ...

  6. 新版Chrome自动禁用第三方插件的解决办法[转]

    原文地址:http://www.douban.com/note/375734834/?type=like Chrome的新策略里面禁用了除chrome web store下载的所有第三方扩展,这个很烦 ...

  7. OC语言@property @synthesize和id

    OC语言@property @synthesize和id 一.@property @synthesize关键字 注意:这两个关键字是编译器特性,让xcode可以自动生成getter和setter的声明 ...

  8. pwnable.kr-fd

    题目: 链接登录: ssh fd@pwnable.kr -p2222 查看文件及权限: ls –al 看到flag文件,但是当前用户fd并没有读权限. cat fd.c 分析程序: int argc ...

  9. javascript的坑

    1 for in循环:使用它时,要主要遍历的是所有可枚举的属性(实例以及原型中的属性) function Person(name){ this.name = name; } Person.protot ...

  10. 黑马程序员——OC语言 三大特性之继承

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) 三大特性之继承 (一)继承的基本用法 先建立个Animal再用Dog继承前 ...