## 选择器的优先级 ``` 1，id选择器（ # myid） 2，类选择器（.myclassname） 3，标签选择器（div, h1, p）, 4，相邻选择器（h1 + p） 5，子选择器（ul > li）, 6，后代选择器（li a） 7，通配符选择器（ * ）, 8，属性选择器（a[rel = “external”]） 9，伪类选择器（a:hover, li:nth-child） ``` 后代指所有后代，而子代单指第一代 兄弟选择器（h1~p）是所有的，相邻选择器（h1 + p）是第一个 <hr> 优先级 一般情况下 - `!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认` 行类样式 > 嵌入样式 > 链接样式；后声明样式 >先声明样式；设定的样式 > 继承的样式 但遇到这几种选择器同时作用于一个元素时，元素又是如何选择样式呢？ 关于权重计算，有两种方式 * 二进制规则计算 * 以1,10,100,1000等数值计算 **各选择器全值总览** * `内联style`，权值：**1000** * `ID选择器`，权值：**0100** * `类选择器`，权值：**0010** * `标签选择器 & 伪元素选择器`，权值：**0001** * `通配符、子选择器、相邻选择器等`，权值：**0000** * 继承样式没有权值 **如果层级相同，则向后比较，层级不同时，层级高的权重大** # link和@import - link属于XHTML标签，⽽@import是CSS提供的。 - ⻚⾯被加载时，link会同时被加载，⽽@import引⽤的CSS会等到⻚⾯被加载完再加载。 - import只在IE5以上才能识别，⽽link是XHTML标签，⽆兼容问题。 - link⽅式的样式权重⾼于@import的权重。 - 使⽤dom控制样式时的差别。当使⽤javascript控制dom去改变样式的时候，只能使⽤link标签，因为@import不是dom可以控制的。 ```js 行内样式：<span style="color:red;">text</span> 嵌入样式：<style type="text/css">.xxx</style> 链接样式：<link href="test.css" type="text/css" /> 导入样式： @import url("../outside/outer.css"); @import适用于引入公共基础样式或第三方样式。 ```