学习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 -- 属性选择器
属性选择器:根据元素的属性选择指定元素 语法:[属性名] 选取含有指定属性的元素 [属性名="属性值"]:选取属性值等于指定值的元素 [属性名^="属性值"]: ...
随机推荐
- 【Saltstack】Saltstack简单说明
[Saltstack] Saltstack是一个服务器集中管理中心平台,可以帮助管理员轻松的对若干台服务器进行统一操作.类似的工具还有Ansible,Puppet,func等等.相比于这些工具,sal ...
- SUSE 安装 iServer、iDesktop启动异常问题
前言: SUSE作为一款经典的linux发行版本,在很多企业用户中都有使用. 本文记录的是在SUSE11 SP3系统中安装iServer.iDesktop出现异常的问题. 环境: 系统:SUSE 11 ...
- 算法题丨Longest Consecutive Sequence
描述 Given an unsorted array of integers, find the length of the longest consecutive elements sequence ...
- 浅谈RMQ
RMQ是一类求区间极值的问题 有一种 \(O\left(nlogn\right)\) 的解法,用倍增实现 倍增算法 变量的定义 \(A_i\) : 原数组 \(f_{i,j}\) : 以 \(i\) ...
- C和C++运行库
一.Windows下动态库 1. 静态函数库 这类库的名字一般是libxxx.lib:利用静态函数库编译成的文件比较大,因为整个 函数库的所有数据都会被整合进目标代码中,他的优点就显而易见了,即编译后 ...
- Beta第五天
听说
- pjax实例demo(c#,iis)
pjax 百度都是api 也没找到demo 自己写了一个 C#写的 需要iis架设 测试ie10 和 火狐 成功 ie10不要用兼容模式 不然不好使 iis 可以直接架设webDemo1文件夹(源码) ...
- 支付宝sdk集成，报系统繁忙 请稍后再试（ALI64）
移动快捷支付,往往需要集成支付宝的sdk,集成的过程相对简单,只要按照支付宝的文档,进行操作一般不会出问题. 下面主要说明一下,集成sdk后报"系统繁忙 请稍后再试(A ...
- bzoj千题计划275：bzoj4817: [Sdoi2017]树点涂色
http://www.lydsy.com/JudgeOnline/problem.php?id=4817 lct+线段树+dfs序 操作1:access 操作2:u到根的-v到根的-lca到根的*2+ ...
- css的内容
块级元素和行内元素的区别: 1. 行内元素部不能够设置宽度和高度.行内元素的宽度和高度是标签内容的宽度和高度.块级元素可以设置宽度和高度. 2. 块级元素会独占一行.而行内元素却部能够独占一行,只能和 ...