学习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 -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
随机推荐
- poj 2503 查字典
Description You have just moved from Waterloo to a big city. The people here speak an incomprehensib ...
- 深入理解Session与Cookie(一）
Session,Cookie简介: Session和Cookie的作用都是为了保持用户与后端服务器的交互状态,但是各自都有缺陷: Cookie: 随着Cookie的个数的增多和访问量的增加,它占用的网 ...
- C++引用指针 & 构造函数
近来回转 C++的学习,脑子又被搞得了一团迷(简直不要忘得太快..... ) 过后静下来想一想,还是因为有些东西没搞清楚导致,所以理了理两个容易搞迷糊的地方. 1. 引用与指针 C++进行传值更 ...
- 每天学习点--------第六天（2017-10-10） 摘要: mysql和Oracle的区别
1.自动增长数据类型的处理 Mysql有自动增长的数据类型,插入记录时不用操作此字段,会自动获取数据值.Oracle没有自动增长的数据类型,需要建立一个自动增长的序列号,插入记录时要把序列号的下一个值 ...
- JavaScript(第六天)【函数】
函数是定义一次但却可以调用或执行任意多次的一段JS代码.函数有时会有参数,即函数被调用时指定了值的局部变量.函数常常使用这些参数来计算一个返回值,这个值也成为函数调用表达式的值. 一．函数声明 函 ...
- Rails 定时任务——whenever实现周期性任务
根据项目的进展,我们需要实现后台进行定时读取信息的功能,而最关键的实现部分是周期性功能,根据调研,决定使用whenever来实现这一功能. github:https://github.com/java ...
- 【福大软工】 W班级总成绩排名2
评分链接: 选题报告 结对第二次作业 需求分析 随堂测试 总分排名:
- 关于python中的operator.itemgetter()函数的用法
1. operator.itemgetter(num)函数 表示对对象的第num维数据进行操作获取. >>>import operator >>>a = [1, 2 ...
- DML数据操作语言之复杂查询
1.视图(View) 我们知道,在关系型数据库中,用来保存实际数据记录的是数据表.和表同等概念也是用来保存东西是:视图. 但是数据表是用来保存实际数据记录的,而视图是用来保存常用select语句的. ...
- zookeeper入门系列：paxos协议
上一章讨论了一种强一致性的情况,即需要分布式事务来解决,本章我们来讨论一种最终一致的算法,paxos算法. paxos算法是由大牛lamport发明的,关于paxos算法有很多趣事.比如lamport ...