学习css之选择器优先级
相信每一位前端工作者最开始迷惑的地方便是界面展示为什么不符合预期效果呢，下面我来介绍一下可能引起上面结果的原因之一——css优先级。
我这里采用对照法来得出结论，代码如下：
<style>
/*伪元素与id选择器*/
#p1 {
background: red;
height: 30px;
}
p:before {
content: "你好";
background: gray;
}
/*内联样式与伪类*/
a:hover {
background: red;
}
/*id与伪类比较*/ #input1 {
background: grey;
}
input[type="button"]:active {
background: red;
}
/*伪类与属性选择器比较*/ input[type="text"]:focus {
background: gray;
}
input[type="text"] {
background: red;
}
/*属性与类比较*/
a[href] {
background: gray;
}
.label2 {
background: red;
}
/*类与标签比较*/
.label1 {
background: gray;
}
label {
background: red;
}
</style> <body>
<p style="background: gray;">
内联样式与伪元素
</p>
<p id="p1">
伪元素与id
</p>
<div>
<input type="button" id="input1" value="id与伪类"></input><br />
<input type="text" placeholder="伪类与属性" /><br />
<a href="#input1" class="label2">属性与类</a><br />
<label class="label1">类与标签</label>
</div>
</body>
界面如下：
灰色代表优先级高的，红色表示优先级低的，可得结论：内联样式》伪元素》id》伪类》属性》类》标签
以上是单一的形式对比，如果出现多个选择器合在一起，那么使用四则运算就好了抛开伪元素不谈，那么内联为千位，id为百位，伪类/属性/类为十位，标签为个位。
十位中再细分三位，与哪个位置的选择器匹配，则哪个位置+1 比较最终的数值就好。
学习css之选择器优先级的更多相关文章
- CSS中选择器优先级顺序实战讲解
原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...
- CSS中选择器优先级的权重计算
CSS中选择器优先级的权重计算 先看一段代码,如下: a{ color: red; } #box a{ color: green; } [class="box"] a{ color ...
- 【CSS】选择器优先级
CSS的选择器优先级的权重 在 Selectors Level 3 规范中,一个选择器的优先级(权重)由依次串联的a.b.c三个标记来计算 a: ID选择器 如#header b: class选择器如 ...
- 【CSS系列-选择器优先级总结】
转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性 CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS中选择器优先级与!important权重使用
CSS中的选择器优先级与!important权重使用 .class选择器要高于标签选择器. #id选择器要高于.class选择器. 标签选择器是优先级最低的选择器. !important的属性它的权重 ...
- 黑马学习CSS之选择器 简单选择器，结合符，选择器，选择器组， 选择器优先级，名称空间
- 有关css的选择器优先级以及父子选择器
css,又称样式重叠表,如今的网页的样式基本是div+css写出来的,功能十分强大,要想在html文件中引入css文件需要在<head></head>标签内输入一行:<l ...
- 前端学习 -- Css -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
随机推荐
- 【Python】 垃圾回收机制和gc模块
垃圾回收机制和gc模块 Py的一个大好处,就是灵活的变量声明和动态变量类型.虽然这使得学习py起来非常方便快捷,但是同时也带来了py在性能上的一些不足.其中相关内存比较主要的一点就是py不会对已经销毁 ...
- 记一次mysql故障处理
突然间,个人网站崩溃了!相信这个报错作为运维都应该清楚的,是数据库宕机了. 数据库我采用mysql 5.1.63,上机查看错误日志: 171010 10:11:01 mysqld_safe Start ...
- SQL更新语句，Error Code: 1175. You are using safe update(在进行视图更新的时候遇到)
转发于:http://blog.csdn.net/qq_26684469/article/details/51105188?locationNum=5&fps=1 原来的SET SQL_SAF ...
- 00_Linux介绍_我的Linux之路
原文章发布于特克斯博客www.susmote.com 什么是操作系统 操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在"裸机& ...
- java枚举类型变通
原始用法 public enum Color { RED, GREEN, BLANK, YELLOW } 开发中用法 public enum ApiCodeEnum { SUCCESS(0," ...
- SSDB安装配置 ERROR! autoconf required! install autoconf first
SSDB简介 SSDB是一个C/C++语言开发的高性能开源NoSQL数据库服务器,支持Key-value, Keyhashmap, Key-zset(sorted set) 等数据结构,十分适合存储数 ...
- Eclipse+Pydev环境搭建
1,准备好Eclipse和JAVA,x64 2,安装JDK,配置JAVA环境变量,假设安装路径为 C:\Program Files\Java\jdk1.8.0_161 在系统变量中,新建CLASSPA ...
- python 异步协程
"""A very simple co-routine scheduler. Note: this is written to favour simple code ov ...
- 个人技术博客(alpha)
APP的权限校验不同于web网页端,web一般使用session记录用户的状态信息,而app则使用token令牌来记录用户信息.有这样一个场景,系统的数据量达到千万级,需要几台服务器部署,当一个用户在 ...
- Linux 下的权限改变与目录配置
Linux 下的权限改变与目录配置 ./代表本目录的意思. (1):用户与用户组, 1:文件所有者,文件被某一用户所有 2:用户组: 对文件给与一个或者多个用户权限配置 3:其它人: (2):l ...