选择器优先级：是指代码的执行顺序

通俗的说，就是多个选择器同时对一个标签分别添加样式，那么这个标签显示那个选择器设置的样式

1.优先级规则

2.规则1和2说明

优先级相同，谁后谁优先

优先级不同，优先级高的优先

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*1.选择器的优先级一至的情况下，谁在后谁的优先级就高*/

            /*div{

                width: 100px;

                height: 100px;

                background: red;

            }

            div{

                width: 100px;

                height: 100px;

                background: green;

            }*/

            /*2.选择器的优先级不一致的情况下，会选择优先级高的---这里class>div*/

            .box{

                width: 100px;

                height: 100px;

                background: red;

            }

            div{

                width: 100px;

                height: 100px;

                background: green;

            }

        </style>

    </head>

    <body>

        <!--

            优先级         代码执行的顺序

                选择器的优先级一致的情况下，谁在后谁的优先级就高

                选择器的优先级不一致的情况下，会选择优先级高的

        -->

        <div class="box"></div>

    </body>

</html>

3.规则3说明

行间>id>class>标签>通配符

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*3.行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）*/

            body *{

                height: 100px;

                background: red;

            }

            div{

                height: 100px;

                background: green;

            }

            .div1{

                height: 100px;

                background: blue;

            }

            #box{

                height: 100px;

                background: yellow;

            }

        </style>

    </head>

    <body>

        <!--

            优先级         代码执行的顺序

                行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）

        -->

        <div id="box" class="div1" style="background: pink;"></div>

        <!--<div id="box" class="div1"></div>-->

        <!--<div class="div1"></div>-->

        <!--<div></div>-->

    </body>

</html>

4.规则4说明

包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            /*4.包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低*/

            #div3{

                height: 100px;

                background: red;

            }

            /*10+100=110*/

            .box2 #div3{

                height: 100px;

                background: green;

            }

            /*100+10=110*/

            #div1 .box3{

                height: 100px;

                background: yellow;

            }

            /*100+10=110*/

            #div2 .box3{

                height: 100px;

                background: blue;

            }

            /*100+1+1=102*/

            #div1 div div{

                height: 100px;

                background: pink;

            }

        </style>

    </head>

    <body>

        <!--

            优先级         代码执行的顺序

                包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低

                假设个选择器的值设置为：

                行间样式            1000

                id选择器           100

                类选择器            10

                标签选择器           1

        -->

        <div class="box1" id="div1">

            <div class="box2" id="div2">

                <div class="box3" id="div3"></div>

            </div>

        </div>

    </body>

</html>

5.规则5说明

群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了

代码演示

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

        /*5.群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了*/

            div,p,h1{

                width: 200px;

                height: 100px;

                background: red;

                margin-top: 50px;

            }

            div{

                background: green;

            }

        </style>

    </head>

    <body>

        <!--

            优先级         代码执行的顺序

    群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了

        -->

        <div></div>

        <p></p>

        <h1></h1>

    </body>

</html>

一天搞定CSS： CSS选择器优先级--08的更多相关文章

  1. CSS中选择器优先级顺序实战讲解

    原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

  2. CSS中选择器优先级的权重计算

    CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...

  3. 【CSS】选择器优先级

    CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...

  4. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

  5. CSS样式选择器优先级

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

  6. CSS中选择器优先级与!important权重使用

    CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...

  7. 学习css之选择器优先级

    相信每一位前端工作者最开始迷惑的地方便是界面展示为什么不符合预期效果呢,下面我来介绍一下可能引起上面结果的原因之一--css优先级. 我这里采用对照法来得出结论,代码如下: <style> ...

  8. 有关css的选择器优先级以及父子选择器

    css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在<head></head>标签内输入一行:<l ...

  9. 一小时搞定DIV+CSS布局-固定页面开度布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. 转载请标明:http://www.kwstu.com/ArticleView/divcss_20139 ...

随机推荐

  1. Jax-ws 开发webService ,并使用spring注入service类

    由于使用myeclipse自动生成的Delegate,所以在使用service实现层的时候,默认创建的时候都是使用new的方法: 这样就导致每一次请求过来都得new一个新的:如果service有注入其 ...

  2. MySQL 5.7贴心参数之 log_timestamps

    写在前面 使用 MySQL 的过程中,经常会有人碰到这么一个问题,看错误日志.慢查询日志的时候,时间总是和本地时间对不上,差了 8 个小时,这样分析起来就相对麻烦了一些. 新改进 对于不知道是什么原因 ...

  3. php 启动过程 - reqeust RSHUTDOWN 过程

    php 启动过程 - reqeust RSHUTDOWN 过程 概述 request RSHUTDOWN 过程在请求结束后调用 调用触发 同 request RINIT 过程一样, 先是用 apach ...

  4. 关于Java中volatile关键字笔记

    volatile通常被认为是一种轻量级的synchronized,字面上它表示易变的,在并发编程中,它保证了共享变量的可见性.所谓可见性指的是,某个线程对变量进行操作后,其他线程能够读取到操作后的最新 ...

  5. 从网络通信角度谈web性能优化

    衡量一个网站的性能有多个指标,DNS解析时间,TCP链接时间,HTTP重定向时间,等待服务器响应时间等等,从用户角度来看,就可以归结为该网站访问速度的快慢.也就是说性能等于网站的访问速度. 早些年Am ...

  6. glup/grunt,browserify / webpack等的比较

    gulp/grunt的比较: Gulp / Grunt 是一种工具,能够优化前端工作流程.比如自动刷新页面.combo.压缩css.js.编译less等等.简单来说,就是使用Gulp/Grunt,然后 ...

  7. 计算机程序的思维逻辑 (82) - 理解ThreadLocal

    本节,我们来探讨一个特殊的概念,线程本地变量,在Java中的实现是类ThreadLocal,它是什么?有什么用?实现原理是什么?让我们接下来逐步探讨. 基本概念和用法 线程本地变量是说,每个线程都有同 ...

  8. bzoj4818 [Sdoi2017]序列计数

    Description Alice想要得到一个长度为n的序列,序列中的数都是不超过m的正整数,而且这n个数的和是p的倍数.Alice还希望,这n个数中,至少有一个数是质数.Alice想知道,有多少个序 ...

  9. [ext4]磁盘布局 - inode bitmap & table

    在[磁盘布局 group部分]已经介绍过ext4的整体布局,其中存在两个与inode有关的名称:inode bitmap和inode table. Inode bitmap,用于表示inode tab ...

  10. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...