CSS中选择器优先级与!important权重使用
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权重使用的更多相关文章
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
- 关于css中选择器的小归纳（一）
关于css中选择器的小归纳 一.基本选择器 基本选择器是我们平常用到的最多的也是最便捷的选择器,其中有元素选择器(类似于a,div,body,ul),类选择器(我们在HTML标签里面为其添加的clas ...
- 【CSS系列-选择器优先级总结】
转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...
- css中的层叠性及权重的比较
假如同一个标签被多个选择器选中,每个选择器都设置了相同的样式,浏览器中加载时这个样式听谁的? 不同选择器设置的同一个样式,只会选择一个进行加载,不会叠加. 为了解决听谁的问题,引入层叠性的概念. 层叠 ...
- css中选择器的使用
css是英文Cascading Style Sheets的缩写.它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.我们再将html比喻 ...
- css中选择器
css中常用的选择器有: 1.元素选择器:h1{} 如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test ...
随机推荐
- axios reponse请求拦截以及token过期跳转问题
前两天项目中遇到了token拦截,需要在请求的header头里放置token,需要用到response拦截,调试过程中遇到了拿不到token的问题 我用的axios实例 let token = sto ...
- Ribbon - Customizing the Ribbon Client
自定义Ribbon算法 自定义Ribbon 官网文档链接 Ribbon github源码地址 <!--ribbon配置--> <dependency> <group ...
- day34作业
作业 查看岗位是teacher的员工姓名.年龄 select name,age from teacher where post='teacher'; 查看岗位是teacher且年龄大于30岁的员工姓名 ...
- Unity混合天空盒
对于不同天气下天空盒的实现. 天空盒时通过天空盒材质更改实现的,新建材质,选择shader/skybox/6sided,然后添加六个天空盒贴图就可以实现天空盒,如果想实现天气变化则需要至少两套贴图,并 ...
- 键盘常见ascii码值
回车事件最常见,码值13 ESC键: VK_ESCAPE (27) 回车键: VK_RETURN (13) TAB键: VK_TAB (9) Caps Lock键: VK_CAPITAL (20) S ...
- 建议收藏：.net core 使用导入导出Excel详细案例，精心整理源码已更新至开源模板
还记得刚曾经因为导入导出不会做而发愁的自己吗?我见过自己前同事因为一个导出改了好几天,然后我们发现虽然有开源的库但是用起来却不得心应手,主要是因为百度使用方案的时候很多方案并不能解决问题. 尤其是尝试 ...
- CSP2019知识点整理
也算是接下来二十天的复习计划吧 仅止于联赛难度左右 基础算法 字符串 char[] cstring memset() 输入无& gets(), fgets(stdin, ,); strcmp, ...
- nginx篇中级用法之反向代理(七层调度)
环境: 两台后端web,一台代理服务器 web1:eth0:192.168.2.100/24 httpd做一个web web2:eth0:192.168.2.200/24 httpd做一个we ...
- Apache配置反向代理、负载均衡和集群(mod_proxy方式)
Apache配置负载均衡和集群使用mod_jk的方式比较多,但是mod_jk已经停止更新,并且配置相对复杂.Apache2.2以后,提供了一种原生的方式配置负载均衡和集群,比mod_jk简单很多. 1 ...
- 获取Centos的Docker CE
Docker文档 Docker提供了一种在容器中运行安全隔离的应用程序的方法,它与所有依赖项和库打包在一起. 获取Centos的Docker CE 一.OS要求 要安装Docker Engine-Co ...