欢迎使用优快云-markdown编辑器

选择器的优先级

选择器对HTML代码作用的时候存在一定的优先级，这影响到了样式存在重叠时应该执行哪一个样式的问题。
正常情况下的选择器排名：
通配选择器：*{ } –该选择器可以与所有的元素进行匹配，会影响html内所有的元素。所以在使用时要慎重考虑，是否需要设置所有元素的通用属性。但是该选择器可以用来清除页面自带的内外边框。
类选择器： 标签{ } –该标签能够改变页面内同一标签的元素的属性。使用时应该有所计划，是否需要改变一个页面内所有属于同一标签的元素的属性。虽然在直接使用会出现属性不可控的情况，但是在将其与后代选择器或者子选择器配合使用时，能够节省大量的工作。但是还是建议在之后选择”类选择器和同一元素使用多个选择器“这样的组合方式配合设置样式。因为这样设置的样式有更高的重复利用率，通过能够更加便捷的修改一个属性。弊端是，会影响到所有使用这个选择器的元素。
ID选择器：#{ } –通过选择ID属性的值来选择元素。有专门的指向性。一个页面只能使用一次。因为一个页面中每个元素的ID是不能相同的。所以说当我们在使用时应该考虑是否需要如此专一的选择器。

 选择器的优先级排名：ID选择器>类选择器>标签选择器>通配选择器。

当时这里有一个很特殊的情况。如果使用到兄弟选择器、后代选择器、子选择器的时候会是什么样呢？

特殊的情况。当外部样式表引入的时候在内部样式表前面，会覆盖内部样式表的样式。

<style>
    #father .song1{
        background: red;
    }
    #son1{
        background: blue;
    }

</style>
<link rel="stylesheet" type="text/css" href="css/trydo.css">


#father .song1{
    background: yellow;
}

这个特殊情况在chrome/firefox/ie9上都存在。

选择器的优先级为

当在使用多重选择的时候，样式表的优先级会进行相加

<style>
    #father .song1{
        background: red;
    }
    #son1{
        background: blue;
    }

</style>

    <div class="father" id="father">
        <div class="song1" id="son1">第一个div</div>
        <div class="song2" id="son2">第二个div</div>
        <div class="song3" id="son3">第三个div</div>
        <div class="clear"></div><!--heck，在最后增加一个div并且为其设置css样式，为解决方法。-->
    </div>

firefox/chrome/ie9存在

当时用兄弟选择器是，也会出现这样的优先级相加的情况。同时相邻兄弟选择器也会出现这样的情况。

<style>
    .song1~.song2{
        background: red;
    }
    .song2{
        background: blue;
    }
</style>

最后测验，当非ID选择器要怎样才能超过ID选择器的优先级。（内联样式不参战）

.father>.song1>.grandson>.song4~.song2+.theend{
    background: red;
}
#theend{
    background: yellow;
}

div class="father" id="father">
        <div class="song1" id="son1">
            <div class="grandson">
                <div class="song4" id="son4">第二个div</div>
                <div class="song2" id="son2">第二个div</div>
                <div class="theend" id="theend">第一个样式表</div>
            </div>
        </div>

集合了多层的选择器也未能代替ID选择器的地位。如果继续加下去应该可以通过优先级累加的办法改变。不过那样的做法对于实际应用好像没有意义。

IE 浏览器下载或者渲染的顺序可能如下：
● IE 下载的顺序是从上到下；
● JavaScript 函数的执行会阻塞IE 的下载；
● IE 渲染的顺序也是从上到下；
● IE 的下载和渲染是同时进行的；
● 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（但并不是说所有相关联的元素都已经下载完。）
● 在下载过程中，如果遇到某一标签是嵌入文件，并且文件是具有语义解释性的（例如：JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。并且在下载后进行解析，如果JS、CSS中如有重定义，后面定义的函数将覆盖前面定义的函数。
● 解析过程中，停止页面所有往下元素的下载。样式表文件比较特殊，在其下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行样式渲染。并以此方式一直渲染下去，直到整个页面渲染完成。

● Firefox 处理下载和渲染的顺序大体相同，只是在细微之处有些差别，例如：iframe 的渲染。