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

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

1.优先级规则

2.规则1和2说明

优先级相同，谁后谁优先

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

代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  8.             /*1.选择器的优先级一至的情况下，谁在后谁的优先级就高*/
  9.             /*div{
  10.                 width: 100px;
  11.                 height: 100px;
  12.                 background: red;
  13.             }
  14.             div{
  15.                 width: 100px;
  16.                 height: 100px;
  17.                 background: green;
  18.             }*/
  20.             /*2.选择器的优先级不一致的情况下，会选择优先级高的---这里class>div*/
  21.             .box{
  22.                 width: 100px;
  23.                 height: 100px;
  24.                 background: red;
  25.             }
  26.             div{
  27.                 width: 100px;
  28.                 height: 100px;
  29.                 background: green;
  30.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <!--
  36.             优先级         代码执行的顺序
  37.                 选择器的优先级一致的情况下，谁在后谁的优先级就高
  38.                 选择器的优先级不一致的情况下，会选择优先级高的
  39.         -->
  40.         <div class="box"></div>
  41.     </body>
  42. </html>

3.规则3说明

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

代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             /*3.行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）*/
  8.             body *{
  9.                 height: 100px;
  10.                 background: red;
  11.             }
  12.             div{
  13.                 height: 100px;
  14.                 background: green;
  15.             }
  16.             .div1{
  17.                 height: 100px;
  18.                 background: blue;
  19.             }
  20.             #box{
  21.                 height: 100px;
  22.                 background: yellow;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <!--
  28.             优先级         代码执行的顺序
  30.                 行间样式>id选择器>类选择器>标签选择器>通配符选择器（*）
  31.         -->
  32.         <div id="box" class="div1" style="background: pink;"></div>
  33.         <!--<div id="box" class="div1"></div>-->
  34.         <!--<div class="div1"></div>-->
  35.         <!--<div></div>-->
  36.     </body>
  37. </html>

4.规则4说明

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

代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             /*4.包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低*/
  8.             #div3{
  9.                 height: 100px;
  10.                 background: red;
  11.             }
  12.             /*10+100=110*/
  13.             .box2 #div3{
  14.                 height: 100px;
  15.                 background: green;
  16.             }
  17.             /*100+10=110*/
  18.             #div1 .box3{
  19.                 height: 100px;
  20.                 background: yellow;
  21.             }
  22.             /*100+10=110*/
  23.             #div2 .box3{
  24.                 height: 100px;
  25.                 background: blue;
  26.             }
  27.             /*100+1+1=102*/
  28.             #div1 div div{
  29.                 height: 100px;
  30.                 background: pink;
  31.             }
  32.         </style>
  33.     </head>
  34.     <body>
  35.         <!--
  36.             优先级         代码执行的顺序
  38.                 包含选择器的优先级是一种累加的关系，加起来的值越大优先级就越高，值越小优先级就低
  39.                 假设个选择器的值设置为：
  40.                 行间样式            1000
  41.                 id选择器           100
  42.                 类选择器            10
  43.                 标签选择器           1
  45.         -->
  46.         <div class="box1" id="div1">
  47.             <div class="box2" id="div2">
  48.                 <div class="box3" id="div3"></div>
  49.             </div>
  50.         </div>
  51.     </body>
  52. </html>

5.规则5说明

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

代码演示

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.         /*5.群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了*/
  8.             div,p,h1{
  9.                 width: 200px;
  10.                 height: 100px;
  11.                 background: red;
  12.                 margin-top: 50px;
  13.             }
  14.             div{
  15.                 background: green;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <!--
  21.             优先级         代码执行的顺序
  22.     群组选择器的优先级取决于位置，谁靠后谁的优先级就高，会把前面的样式给覆盖了
  23.         -->
  24.         <div></div>
  25.         <p></p>
  26.         <h1></h1>
  27.     </body>
  28. </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. R中基本统计图

    一.条形图 1.安装包install.packages("vcd"); library(vcd);count<-table(Arthritis$Improved);#tabl ...

  2. C#邮件发送开发经本人测试通过

    先准备以下工作 1.先开通邮箱我以QQ邮箱为例 2.开通 POP3/SMTP服务 (如何使用 Foxmail 等软件收发邮件?) 已开启 |  关闭 获取授权码 3.C#开发了先写一个CS文件 pub ...

  3. LVS+Keepalived实现DBProxy的高可用

    背景 在上一篇文章美团点评DBProxy读写分离使用说明实现了读写分离,但在最后提了二个问题:一是代理不管MySQL主从的复制状态,二是DBProxy本身是一个单点的存在.对于第一个可以通过自己定义的 ...

  4. lib-flexble 使用遇到的bug及解决方案

    1 lib-flexble解决微信端长按不能弹出识别二维码功能 加viewport就完美解决  flexble可以自动完成 一般情况不建议加 但是么 bug出来了  加上就好了 2 Font Boos ...

  5. 调用startActivityForResult后，onActivityResult为什么立刻响应

    现象      今天在编写代码的时候,涉及到两个Activity通过Intent来传值的问题.具体描述为:activity A调用startActivityForResult()函数启动Activit ...

  6. javascript 六种数据类型（一）

    js的数据类型和常见隐式转化逻辑. 一.六种数据类型 原始类型(基本类型):按值访问,可以操作保存在变量中实际的值.原始类型汇总中null和undefined比较特殊. 引用类型:引用类型的值是保存在 ...

  7. leetcode contest 20

    Q1: 520. Detect Capital Given a word, you need to judge whether the usage of capitals in it is right ...

  8. Linux中安装redis

    第一部分:安装redis 1.希望将安装包下载到此目录 /home/local/src 安装过程指令 $ mkdir /home/local/redis   $ cd /home/local/src  ...

  9. JavaScript ,Python,java,C#,Go系列算法之【插入排序篇】

    常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等.用一张图概括: 插入排序 插入排序(英语:Insertion Sort)是一种简单直观的排序算法. ...

  10. 网站的高性能架构---Web前端性能优化

    网站性能测试 不同视角下的网站性能 用户视角的网站性能:从用户角度,网站性能就是用户在浏览器上直观感受到的网站响应速度.用户的感受时间包括用户计算机和网站服务器通信的时间.网站服务器处理请求时间.用户 ...