CSS SpecificityCSS特性、权重、优先级-CSS specificity规则、_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:50:56
Original
1179 people have browsed it

CSS Specificity

As mentioned above, CSS styles follow an order of specificity and point values to determine(确定) when styles override(覆盖) one another or take precedence(优先). Nettuts recently had a nice article in which the point values for css were explained. They are like so:

Elements - 1 points

Classes - 10 points

Identifiers - 100 points

Inline Styling - 1000 points

When in doubt, get more specific with your style declarations(声明). You can also use the !important declaration for debugging(调试) purposes if needed.

 

Read more about css specificity:

HTML Dog on Specificity

Smashing Magazine on CSS Specificity

中文:

CSS方面很多人都问过我,设定后的CSS后却没有效果,样式失效,样式冲突,
这种问题一般发生于新手,很多情况下是忽视了CSS中的权重specificity,
我试总结关于specificity方面的一些规则、算法及实例
希望对新人能有所帮助~!
作者:孙佳(http://www.sjweb.cn/ 貌似链接不可用了)

关于CSS specificity
CSS 的specificity 特性或称非凡性,它是衡量一个衡量CSS值优先级的一个标准,既然作为标准,就具有一套相关的判定规定及计算方式,specificity用一个四位的数字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。


在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。

选择符Specificity值列表

Selectors
选择符
Syntax Samples
语法
ensample
示例
Specificity
特性
通配选择符(Universal Selector) * *.div { width:560px;} 0,0,0,0
类型选择符(Type Selectors) E1 td { font-size:12px;} 0,0,0,1
伪类选择符(Pseudo-classes Selectors) E1:link a:link { font-size:12px;} 0,0,1,0
属性选择符(Attribute Selectors) E1[attr] h[title] {color:blue;} 0,0,1,0
ID选择符(ID Selectors) #sID #sj{ font-size:12px;}
0,1,0,0
类选择符(Class Selectors) E1.className .sjweb{color:blue;} 0,0,1,0
子对象选择符(Child Selectors) E1 > E2 body > p {color:blue;} E1+E2
相邻选择符(Adjacent Sibling Selectors) E1 + E2 div + p {color:blue;} E1+E2
选择符分组(Grouping) E1,E2,E3 .td1,a,body {color:blue;} E1+E2+E3
包含选择符(Descendant Selectors) E1 E2 table td {color:blue;} E1+E2

规则:
1. 行内样式优先级Specificity值为1,0,0,0,高于外部定义。
如:

sjweb

外部定义指经由
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!