html div 先后问题,关于CSS优先级问题

之前遇到这种问题一直简单粗暴的使用 ！import，今天在老大的指引下才发现这里面也大有文章，下面梳理一下我自己的理解。

首先，css优先级顺序：内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类 > 元素选择器 > 通用选择器(*) > 继承的样式；

然后具体先解释一下这些选择器都是什么鬼，当然css基础好的童鞋可以忽略这一段。

内联样式：

内联样式

Id选择器：

Id选择器

#test {color:red;}

类选择器：

类选择器

.test {color:red;}

属性选择器：

属性选择器

[content] {color:red;}

Hello world

[title] {color:red;}

W3School [href]{font-size:40px}

伪类：

这是一个链接。

注释：在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

注释：在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！

a:link {color: #FF0000}

a:visited {color: #00FF00}

a:hover {color: #FF00FF}

a:active {color: #0000FF}

元素选择器：

这是 heading 1

这是 heading 2

这是一段普通的段落。

html {color:black;}

p {color:blue;}

h2 {color:silver;}

通用选择器：

通用选择器

*.test {color:red;}

然后我们来了解一下优先级的计算方法：

a、用a表示选择器中ID选择器出现的次数

b、用b表示类选择器，属性选择器和伪类选择器出现的总次数。

c、用c表示标签选择器、伪元素选择器出现的总次数

d、忽略通用选择器

e、然后计算a*100+b*10+c的大小，这就是优先级了。

权重：内联样式1000》id选择器100》class选择器10》标签选择器1

总结：ID选择器「如：#header」，Class选择器「如：.foo」，属性选择器「如：[class]」，伪类「如：:link」，标签选择器「如：h1」，伪元素「如：:after」，选择器「*」

最后我们再来了解一下为什么我常用的！important没有列入优先级中，因为官方认为!import和优先级没一点关系。

不建议使用!import

Never 绝不要在全站使用!import。

Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用 !important

Never 永远不要在你的插件中使用 !important

Always 要优先考虑使用样式规则的优先级来解决问题而不是 !important

选择元素时尽量不要多选，不要放宽选择器的范围。因为范围越小，越具有针对性，优先级越高。

但是什么时候需要使用!import呢？

使用!import的场合也是有的，但是是在没有别的解决方案的时候。

比如需要覆盖内联样式，因为内联样式的优先级最高，只能用!import去覆盖内联样式。