css选择器优先级

        本文承接上篇文章css选择器一览，这里作为一个补充内容来讲。上一篇我讲了很多css选择器，那么在实际上在用这些选择器的时候如何知道哪一个的优先级更高呢？下面我就来说一下。

        每个浏览器都有它默认的属性，就比如Opera浏览器的checkbox和Chrome浏览器的checkbox的默认属性是不同的，所以这个是最低一级的优先级，可以很轻易的被修改。

        在css中，有些元素的属性是可以让他的子元素继承的，详细哪些属性可以继承哪些不可以继承请参照这篇文章：CSS中可以和不可以继承的属性。这些继承而来的属性可以修改掉浏览器默认的属性，但是也很容易被别的选择器给修改掉，所以是排倒数第二。

        排倒数第三的是通配符选择器，这个选择器可以选择所有元素，对所有元素的样式进行操作。排倒数第四的是标签选择器，这个选择器是针对某个元素进行操作的。排倒数第五的是类选择器（class），这个选择器针对的是所有同一个class值的元素进行操作。接下来就是前三名了，第三的是id选择器，它的优先级比class的高，针对的是某个id的元素。而第二名是作为style属性写在元素内的样式。第一的就是属性后面使用!important，这个会覆盖页面内任何位置定义的元素样式。这八个级别的排序如下：

!important>行内样式>id选择器>class选择器>标签选择器>通配符选择器>继承>浏览器默认属性        但是问题却并没有那么快解决，如果都用同一个选择器，那么优先级怎么比。或者如果是用到了类似后代选择器（如div #aaa）的多个级别选择器，这个时候优先级又是怎么样呢？
        在css中，如果是同一级别的选择器，后面的会覆盖掉前面的样式：

<style>
p{color:red;}
p{color:blue;}
</style>
<p>aaa</p>        如果是多个级别选择器混合的话，如：
<style>
div.aaa{
color: blue;
}
div#bbb{
color: red;
}
</style>
<div class='aaa' id='bbb'>aaa</div>        这个时候优先级怎么计呢？首先在css中，我们可以简单的给一些选择器赋一个权重值。如内联样式权值为1000，id选择器权值为100，class选择器权值为10，标签选择器权值为1。所以上面的例子中，id选择器的会比class选择器的优先级更高一些。但是不管怎么样，!important还是优先级最高的：
<style>
div.aaa{
color: blue;
}
div#bbb{
color: red;
}
div{
color:yellow !important;
}
</style>
<div class='aaa' id='bbb' style='color:black'>aaa</div>        同理如果优先级相同还是选最后出现的样式。最后需要注意的是，选择器定位的原则是从右往左的。如选择器为div.aaa，它是先选择所有class名为aaa的元素，然后再选择其父元素标签为div的元素，这个原则对优化浏览器性能的指导意义很大，建议浏览这篇文章更好的了解css如何优化性能：高性能CSS