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

  • .class选择器要高于标签选择器。
  • #id选择器要高于.class选择器。
  • 标签选择器是优先级最低的选择器。
  • !important的属性它的权重值优先级最高的，大于所有的选择器。

标签选择器和.class选择器

  • 让我们进入标签选择器和.class选择器谁的优先级高实践，实践内容如：将HTML页面中的h2标签设置文本颜色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>优先级</title>

    <style>

        h2{

           color: red; /*红色*/

       }

       .box{

            color: springgreen; /*绿色*/

       }

    </style>

</head>

<body>

    <h2 class="box">微笑是最初的信仰</h2>

</body>

</html>

  • 结果图

.class选择器和id选择器

  • 让我们进入.class选择器和id选择器谁的优先级高实践，实践内容如：将HTML页面中的h2标签设置文本颜色。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>优先级</title>

    <style>

       h2{

           color: red; /*红色*/

       }

       .box{

            color: springgreen; /*绿色*/

       }

       #box{

           color:blue; /*蓝色*/

       }

    </style>

</head>

<body>

   <h2 class="box" id="box">微笑是最初的信仰</h2>

</body>

</html>

  • 结果图

!important权重使用

  • 现在我们知道了标签选择器优先级最低，那么笔者将标签选择器添加!important属性呢，谁的优先级更高呢？
  • !important权重使用格式如下：
    color: red !important; /*红色*/

  • 注意：属性：值 !important属性值用空格隔开即可。

  • 让我们进入 !important属性使用实践，看看!important属性威力有多大哈。

  • 代码块

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>!important使用</title>

    <style>

       h2{

           color: red !important; /*红色*/

       }

       .box{

            color: springgreen; /*绿色*/

       }

       #box{

           color:blue; /*蓝色*/

       }

    </style>

</head>

<body>

   <h2 class="box" id="box">微笑是最初的信仰</h2>

</body>

</html>

  • 结果图

总结

  • 优先级从低到高如：标签选择器、.class选择器、#id选择器、!important属性

CSS中选择器优先级与!important权重使用的更多相关文章

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

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

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

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

  3. CSS样式选择器优先级

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

  4. 【CSS】选择器优先级

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

  5. 关于css中选择器的小归纳（一）

    关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...

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

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

  7. css中的层叠性及权重的比较

    假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...

  8. css中选择器的使用

    css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...

  9. css中选择器

    css中常用的选择器有: 1.元素选择器:h1{}  如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test ...

随机推荐

  1. 实现基于netty的web框架,了解一下

    上一篇写了,基于netty实现的rpc的微框架,其中详细介绍netty的原理及组件,这篇就不过多介绍 这篇实现基于netty的web框架,你说netty强不强,文中有不对的地方,欢迎大牛指正 先普及几 ...

  2. MySQL基础篇（3）常用函数和运算符

    一.字符串函数(索引位置都从1开始) CONCAT(S1,S2,...Sn): 连接S1,S2,...Sn为一个字符串,任何字符串与NULL进行连接的结果都是NULL INSERT(str,x,y,i ...

  3. unity单例封装

    # 1.前言本篇主要针对Unity单例模式,完成一个可以重复继承使用的抽象类,减少重复的工作与代码.同时,对存在的多种单例进行优劣分析.# 2.Unity单例问题分析## 2.1 单例原则单例要满足以 ...

  4. 使用grep过滤make的输出内容

    make的输出内容其实分为两种,有些是到标准输出,有些是到标准错误,由于标准输出和标准错误默认都是屏幕,所以平时区分不出来, 实际上一般是error和warning信息到标准错误,其余的到标准输出. ...

  5. Jenkins 2.60.x 2种发送邮件方式

    1.1 默认发邮件的配置方式 1.1.1 系统级别 邮件配置 1.1.2 项目级别 邮件配置 测试构建失败是否会发邮件: 控制台输出:提示已发送邮件给项目配置指定的两个邮箱地址. 1.1.2.1  查 ...

  6. 暑期集训20190725 加法(add)

    [题目描述] 数学课,黑板上写着n个数字,记为A1到An,fateice会重复以下操作若干次: 1. 选择两个奇偶性相同的整数Ai和Aj, 将他们擦去 2. 将Ai+Aj写在黑板上 问黑板上最终是否有 ...

  7. Java IO编程——文件拷贝

    在操作系统里面有一个copy命令,这个命令的主要功能是可以实现文件的拷贝处理,现在要求模拟这个命令,通过初始化参数输入拷贝的源文件路径与拷贝的目标路径实现文件的拷贝处理. 需求分析: ·需要实现文件的 ...

  8. nginx篇高级之优化整理

    优化思路: 一.修改连接数和工作线程让其支持更多的并发量. worker_processes 2;                    //与CPU核心数量一致 worker_connections ...

  9. [考试反思]0727NOIP模拟测试9

    啊哈?水到一个rk1? 谢谢诸位大佬放水让我这种人体验到了rk1的滋味. 怪怪的滋味.不太像我的水平. 其实这次考试心态已经佛了,刚意识到前6次考试累计的挺高的分数被清空了,7,8两场又爆炸了... ...

  10. C# WebApi 根据实体类检查传参或字典检查参数

    根据实体类或字典检查传参,是否缺少参数并返回缺少参数 值类型必须声明可空 /// <summary> /// 根据 Dictionary<string, string> 得到实 ...