CSS选择器、优先级以及!important知识总结

html-css028

CSS选择器、优先级以及!important知识总结,第1张

关于CSS选择器，首先请看这里： CSS 选择器参考手册

通过以上，我们可以将CSS选择器分为以下几种：

<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>

示例：

说明：以下E表示元素，attr表示属性，val表示属性的值。

说明：以下E表示元素

示例：

示例：

示例：

示例：

E:not(s) ,匹配不符合当前选择器的任何元素

示例：

E:target ,匹配文档中特定"id"点击后的效果

示例：

这里我们简单讨论下后代元素选择器和子元素选择器的区别

示例

CSS优先级是指CSS样式在浏览器中被解析的 先后顺序 。

多重样式（Mutiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是多重样式的使用情况。

一般情况下，（ 外部 样式）External style sheet <（ 内部 样式）Internal style sheet <（ 内联 样式）Inline style

例外 ：如果外部样式放在内部样式的后面，则外部样式将会覆盖内部样式。

示例：

给不同的选择器分配不同的权值

解释：

示例

结果：标签内的数据显示为蓝色。

比较样式的优先级是，只需统计不同选择器的个数，然后与对应的权值相乘即可。根据结果便可得出优先级。

看到这里，有些同学是不是对!important有点迷惑呀 为什么有了它，就优先级最高呐 下面我们再来详细讲一讲!important~

!important 是CSS1就定义的语法，作用是提高指定样式的应用优先权。

语法格式： {cssRule !important} ，即写在定义的最后面，例如： box { color: red !important}

声明了 !important 的样式，具有最高的优先级，相当于写在最下面（最后定义）

IE 6.0 不完全 支持!important

IE支持重定义中的!important，例如：

你将会发现定义了样式 class="yuanxin" 时，在IE下，字体显示为红色（#e00）。

但不支持同一定义中的 !important 。例如：

此时在IE6下不支持，你将会发现定义了样式 class="yuanxin" 时，字体显示为黑色（#000）。

解释 ：

important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为!important优先级较高，否则当含!important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为!important较低!

再举一个例子：

因为IE 6.0一直都不完全支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。

完。

总结内容参考以下：

w3school_CSS 选择器参考手册

阮一峰_CSS选择器笔记

css选择器优先级深入理解

CSS 的优先级机制[总结]

十分感谢你们的分享 n(*≧▽≦*)n

注：原文章首发于： CSS选择器、优先级以及!important知识总结 ，现迁移至此。

<script async src="//jsfiddle.net/hysunny/3gwbeu3v/embed/html,css,result/"></script>

著作权归作者所有。

商业转载请联系作者获得授权，非商业转载请注明出处。

作者：顾轶灵

链接：http://www.zhihu.com/question/19705894/answer/13414580

来源：知乎

个人觉得多数人都是从而

HTML

开始的，毕竟没有内容谈样式没多大意义。HTML

和

CSS

先后入个门，再同时慢慢深入吧。

而理论上，CSS

是可以脱离

HTML

存在的，它是用来为表述内容的文档指定样式的，这个文档可以是

HTML、XML或者其他类型的文档，只要你为这个文档规定了各种元素、属性的表示方法。所以说没有

HTML

从理论上说是可以学

CSS

的。

但从实际角度看，浏览器基本上也仅仅实现了

CSS

在

HTML、XML

上的应用，从而脱离

HTML

去学

CSS

实用意义不大。

反过来，HTML

诞生早于

CSS，肯定是可以脱离

CSS

存在的。在

CSS

诞生前它同时肩负着组织内容和定义其展现的双重责任，为了解藕，让样式与内容分离才有了

CSS。对

CSS

的了解又有助于理解哪些事该让

CSS

来做，从而写出更美的

HTML。

按照良好的CSS书写规范来写CSS代码，这样会提高代码的阅读体验。下面具体说几点。

CSS书写顺序

位置属性(position, top, right, z-index, display, float等)

大小(width, height, padding, margin)

文字系列(font, line-height, letter-spacing, color- text-align等)

背景(background, border等)

其他(animation, transition等)

使用CSS缩写属性

CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的“0”

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

输入的时候少按一个shift键；

浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）

能良好区分JavaScript变量命名（JS变量命名是用“_”）