CSS3   优先级 

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

优先级

概念EDIT

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级基于 由各种选择器组成的匹配规则。

优先级是如何计算的？EDIT

优先级就是一个 应用于指定的CSS声明的 权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

注意: 元素在文档树中的位置是不会影响优先级的。

选择器类型

下列是一份 优先级逐级增加的 选择器列表：

①此列表是从英文版搬过来的：

0. 元素(类型)选择器（type selectors）（例如：h1）和 伪元素选择器（pseudo-elements）（例如：:before）

1. 类选择器（class selectors） (例如：.example)，属性选择器（attributes selectors）（例如：[type="radio"]），伪类选择器（pseudo-classes）（例如：:hover）

2. ID选择器（例如：#example）

②此列表是在我翻译之前，中文版本来的面目：

  • 通用选择器（*）
  • 元素(类型)选择器（type selectors）
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

通用选择器（universal selector）(*), combinators (+, >, ~, ' ')  和 否定伪类（negation pseudo-class）(:not()) 不会影响优先级（但是，在 :not() 内部声明的选择器是会影响优先级的）。

!important 规则例外

当在一个样式声明上使用 !important 规则时，该样式声明会覆盖CSS中任何其他的声明,。尽管技术上 !important 与优先级毫无关系，但是它们之间直接相互影响。使用 !important 是一个坏习惯，应该尽量避免，因为这打断了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有!important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用。

一些经验法则：

  • Never 永远不要在全站范围的 css 上使用 !important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用   !important
  • Never 永远不要在你的插件中使用 !important
  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

  • 取而代之，你可以：

  1. 善用 CSS 的级联属性
  2. 使用更多具体的规则。比如在你需要选定的对象元素前加上更多的元素，使选择的范围缩小，你的选择器就变得更有针对性，从而提高优先级： 
    <div id="test">
    
  <span>Text</span>
    
</div>
    #test span { color: green }
    
span { color: red }
    
div span { color: blue }

无论你c​ss语句的顺序是什么样的，文本都会是绿色的(green)，因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色(blue)的规则都会覆盖红色(red)的规则）

什么时候应该使用：

A) 一种情况

  1. 你的网站上有一个设定了全站样式的CSS文件，
  2. 同时你（或是你同事）写了一些很差的内联样式。

在这种情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。

活生生的例子比如：一些写得很糟糕的 jQuery插件里面使用的内联样式。

B) 另一种情况

#someElement p {

    color: blue;

}

p.awesome {

    color: red;

}

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，如果不使用 !important ，第一条规则永远比第二条的优先级更高

怎样覆盖掉 !important

很简单，你只需要再加一条 !important 的CSS语句，将其应用到更高优先级的选择器（在原有基础上添加额外的标签、类或 ID 选择器）上；或是保持选择器一样，但添加的位置需要在原有声明的后面（优先级相同的情况下，后边定义的会覆盖前边定义的）。

一些拥有更高优先级的例子：

table td    {height: 50px !important;}

.myTable td {height: 50px !important;}

#myTable td {height: 50px !important;}

或者使用相同的选择器，但是置于已有的样式之后：

td {height: 50px !important;}

更多关于important的帖子:

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

http://stackoverflow.com/questions/11178673/how-to-override-important

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

1

CSS优先级:

               元素.类 > 元素 > 类
               E.class > E > .class

demo:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>table_slash</title>

	<!-- http://weixin.sciencenet.cn/ -->

	<style>

		*{

			text-decoration: none;

			margin: 0;

			padding: 0;

			box-sizing: border-box;

		}

		.box{

			width: 700px;

			height: 500px;

			margin: 0 auto;

			border: 1px solid red;

		}

		.flist td {

		    height: 40px;

		    /*border-bottom: 1px dashed #CCC;*/

		    border-bottom: 1px dashed rgba(255,0,255,0.7);

		    background: rgba(0,0,0,0.3);

		}

		table{

			/*border-collapse: separate;

			border-spacing: 2px;

			border-color: grey;*/

			/*display: table; 497x128*/

			/*display: block; 698x128*/

			display: block;

			border-spacing: 0;

		}

		tbody {

		    /*display: table-row-group; 497x128*/

		    /*vertical-align: middle;

		    border-color: inherit;*/

		    display: block;

		}

		tr{

			/*display: table-row;*/

		    /*vertical-align: inherit;

		    border-color: inherit;*/

			width: 100%;

			display: block;

		}

		td, th {

		    /*display: table-cell;

		    vertical-align: inherit;*/

		    display: block;

		}

		td:first-child{

			width: 88%;

			font-weight: bold;

			background-color: green;

		}

		td.time{

			 width: 12%;

			 font-size: 13px;

			 color: #9f9d9d;

			 background: yellow;

		}

		/*.time{

			 width: 12%;

			 font-size: 13px;

			 color: #9f9d9d;

			 background: yellow;

		}*/

		/*

			td > .time

		    CSS优先级 元素.类 > 元素 > 类

		    E.class > E > .class

		*/

	</style>

</head>

<body>

	<div class="box">

		<div class="flist">

			<table>

				<thead>head</thead>

				<tbody>

					<tr>

						<td>

							[<a href="#?id=37" title="曾经的第二大民营钢铁公司就这样垮了" target="_blank">矿业界</a>]

							<a href="#?id=5134"   title="曾经的第二大民营钢铁公司就这样垮了" target="_blank">曾经的第二大民营钢铁公司就这样垮了</a>

						</td>

						<td class="time">2015/9/29</td>

					</tr>

					<tr>

						<td></td>

						<td></td>

					</tr>

					<tr>

						<td></td>

						<td></td>

					</tr>

				</tbody>

				<tfoot>foot</tfoot>

			</table>

		</div>

	</div>

</body>

</html>

元素.类 > 元素

元素 > 类

1

1

1

1

1

1

1

1

1

1

1

1

1

1

CSS3 优先级的更多相关文章

  1. CSS选择符、属性继承、优先级算法以及CSS3新增伪类、新特性

    CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3新增伪类有那些?CSS新增了哪些特性?下面我整理了一些,仅供参考. CSS 选择符: 1)      id选择器(# myid) ...

  2. css3-1 css3游戏介绍、css3样式和优先级

    css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...

  3. 学习了解CSS3发展方向和CSS样式与优先级

    通过学习CSS3游戏介绍.CSS样式和优先级章节,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on Cod ...

  4. 简单了解css3样式表写法和优先级

    css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  5. CSS、CSS2和CSS3选择器总结(全部选择器种类及其优先级)

    选择器种类罗列: 1.基础的选择器 选择器 含义 示例 * 通用元素选择器,匹配任何元素 * { margin:0; padding:0; } E 标签选择器,匹配所有使用E标签的元素 p { fon ...

  6. 动画中的id与class使用css3的优先级问题

    今天在做一个项目,用zepto给元素增加一个class,class里面有transform的效果.开始的时候,元素的样式是用id选择器写的,但是增加class之后,发现动画效果出不来,当时头好晕没想出 ...

  7. 【CSS3】内联、内部、外部样式，样式优先级、层叠、继承

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 请写出css3样式的优先级,并排序

    !important(权重最大)1000>内嵌样式(style="")>内部样式>外联样式>@import url("url");

  9. HTML5 & CSS3初学者指南(2) – 样式化第一个网页

    介绍 我们已经使用基本的 HTML 编写了一个网页.但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力. 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使 ...

随机推荐

  1. python生成器 递归

    生成器 生成器:只要函数体内出现yield关键字,那么再执行函数就不会执行函数代码,会得到一个结果,该结果就是生成器   生成器就是迭代器   yield的功能 1.yield为我们提供了一种自定义迭 ...

  2. Python_1生成器（下）之单线并行--生产着消费者模型

    1 import time 2 def consumer(name): 3 print('%s准备吃包子了!' %name) 4 while True: 5 baozi = yield 6 print ...

  3. linux系统层面调优

    linux系统层面调优和常见的面试题 - 云+社区 - 腾讯云 https://cloud.tencent.com/developer/article/1664287

  4. .Net 5 C# 泛型（Generics）

    这里有个目录 什么是泛型? 后记 什么是泛型? 我们试试实现这个需求,给一个对象,然后返回 另一个同样的对象,先不管这个实用性,我们实现看看 首先是int型 private int Get(int a ...

  5. Spring,Spring MVC,MyBatis,Hibernate总结

    将之前学习的框架知识进行了UML图总结,若有错误或不当之处,劳烦朋友们指正,会及时作出修改和补充: [toc] Spring Spring MVC MyBatis,Hibernate

  6. RabbitMQ （基础知识）

    AMQP简介 AMQP(Advanced Message Queue )即:高级消息队列协议:,是应用层协议的一个开放标准,为面向消息的中间件设计:高级消息队列协议使得遵从该规范的客户端应用和消息中间 ...

  7. SealClient

    import java.io.BufferedReader; import java.io.FileInputStream; import java.io.IOException; import ja ...

  8. Spring学习笔记2

    一.什么是AOP 面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.在不影响原来功能代码的基础上,使用动态代理加入自己需要的一些功能(比如权限的验证,事务的控制,日志的记录 ...

  9. [CCPC2019网络赛] 1008-Fishing Master（思维）

    >传送门< 题意:现在需要捕$n$条鱼并且将它们煮熟来吃.每条鱼要煮相应的时间才能吃(可以多煮一会),锅里每次只能煮一条鱼,捕一条鱼的时间是相同的,但是在捕鱼的时间内不能做其他事(比如换一 ...

  10. Educational Codeforces Round 83 D. Count the Arrays（组合，逆元，快速幂）

    题意: 从 m 个数中选 n - 1 个数组成先增后减的长为 n 的数组. 思路: 因为 n 个数中有两个数相同,所以每种情况实际上只有 n - 1 个不同的数--$c_m^{n - 1}$, 除去最 ...