今天进行了一个前端的笔试，问到了样式优先级的选择问题，说真的，我只能凭感觉判断一些优先级，到了复杂情况还真不一定能判断出来，所以来总结一下。
一般情况
一般结论就是：
通用选择器(也就是*)<元素（类型）选择器(比如p标签)<类选择器(.class{…})<属性选择器([attribute=value]之类的)<伪类(:hover)<ID 选择器(#id{…})<内联样式(也就是定义在标签里面的style)
总的来说就是
外部样式<内部样式 <内联样式
有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
除开以上，还有一个特别需要关注的就是**!important**，只要他出现，那么一定以他优先
权重表
权重分为四个等级
-
第一等：内联样式，权重1000，即标签内的style属性设置的样式
-
第二等：ID选择器，权重100，例如#id{…}
-
第三等：类选择器，伪类选择器，属性选择器，权重10，例如.class{…}、:hover{…}、[arrtibute=value]
-
第四等：标签选择器，伪元素选择器，权重1，例如div{…}、::after{…}
根据样式根据以上规则，按照选择器累加计算权重，例如
#my-id .my-class div p{...}
对于p标签的来说，这个样式的权重就是100(#my-id)+10(.my-class)+1(标签选择器)+1(标签选择器)=112。权值越大，那么优先级越高。
对于同权重的样式来说，需应用靠后定义的样式，这里靠后是指在样式文件或者<style>标签中定义时位置靠后的元素，同时遵循“元素上的style” > “文件头上的style元素” >“外部样式文件”的优先级。