学习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 -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
随机推荐
- BiLstm与CRF实现命名实体标注
众所周知,通过Bilstm已经可以实现分词或命名实体标注了,同样地单独的CRF也可以很好的实现.既然LSTM都已经可以预测了,为啥要搞一个LSTM+CRF的hybrid model? 因为单独LSTM ...
- 远程通信的几种选择（RPC，Webservice，RMI，JMS的区别）
RPC(Remote Procedure Call Protocol) RPC使用C/S方式,采用http协议,发送请求到服务器,等待服务器返回结果.这个请求包括一个参数集和一个文本集,通常形成&qu ...
- Webpack的加载器
一.什么是加载器(loaders)loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用load ...
- C++基于范围循环（range-based for loop）的陷阱
C++的基于范围的循环是C++11出现的新特性,很方便,一定程度上替代了使用迭代器的for循环用法.不过基于范围的for循环有一个隐藏的陷阱,如果不注意可能会出现严重的内存错误. 举例说明 看下面这个 ...
- Hibernate学习（1）- 初识
一.概念引入 1.持久化: 狭义概念:数据存储在物理介质不会丢失. 广义概念:对数据的CRUD操作都叫做持久化. 2.加载: hibernate里,数据从数据库中加载到session. 3.ORM - ...
- java 5并发中的阻塞队列ArrayBlockingQueue的使用以及案例实现
演示一个阻塞队列的使用 public class BlockingQueueTest { public static void main(String[] args) { //创建一个包含三个元素的阻 ...
- SpringMVC学习笔记三 整合jdbc和事务
spring整合JDBC spring提供了很多模板整合Dao技术,用于简化编程. 引入相关jar包 spring中提供了一个可以操作数据库的对象,JDBCTemplate(JDBC模板对象).对象封 ...
- JavaEE GenericServlet 解析
从 上一篇 文章中可以看到,直接实现 Servlet 接口需要实现其所有方法,而这通常不是好的做法.相反,一种相对较好的做法是给出一个实现类来默认实现其所有方法或者部分方法,并开放给子类.而子类再在此 ...
- JavaScript(第二十二天)【动态加载js和css】
学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式. 一．元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...
- 第七周PTA作业
第一题: #include<stdio.h> int main() { ; ; ){ sum=sum+i; i++; } printf("sum = %d\n",sum ...