問題一：CSS有幾種引入方式? link 和@import 有什么區(qū)別?
- CSS引入方式
1.外部樣表式：如下
<link rel="stylesheet" type="text/css" href="xxx.css">
2.內部樣式表【使用<style>標簽】：如下
<head>
<style type="text/css">
div{ color: red; font-size:12px; }
</style>
</head>
注：<style></style>內部樣式表寫在html的<head>內，只對所在網頁有效
3.內聯(lián)樣式：如下
<div style="color:red; font-size:12px;">123</div>
<p style="color:red">段落</p>
4.@import方式引用外部樣式表。如下：
<head>
<style type="text/css">
@import url(xxx.css);
</style>
</head>
PS： 注意一定要寫分號
- link和@import有什么區(qū)別
不同點：
1.來源和作用的不同：<link>標簽屬于HTML標簽，只能放在HTML文檔的代碼中使用，除了可以加載CSS外，還可以用于其他方面，比如：定義rel 連接屬性。@import屬于css提供的方法，只能用于加載css，@import既可以在HTML文檔的代碼中使用，也可以在css文件中使用。
2.加載順序的不同：link引用css時，在頁面載入時同時加載；@import需要頁面完全載入后加載。
3.兼容性的不同：link是xhtml標簽，無兼容問題；@import是在低于IE5版本瀏覽器中不支持。
4.使用DOM控制樣式時的不同：link支持使用javascript控制dom去改變樣式；而@import不支持。
問題二：列出你所知道的選擇器
- 選擇器類型：
1、基礎選擇器
| 選擇器 | 含義 |
|---|---|
| * | 通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用） |
| #id | id選擇器，匹配特定id的元素 |
| .class | 類選擇器，匹配class包含(不是等于)特定類的元素 |
| element | 標簽選擇器 |
例如：
*{
padding: 0;
}
2、組合選擇器
| 選擇器 | 含義 |
|---|---|
| E,F | 多元素選擇器，用,分隔，同時匹配元素E或元素F |
| E F | 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F |
| E>F | 子元素選擇器，用>分隔，匹配E元素的所有直接子元素 |
| E+F | 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F |
| E~F | 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否） |
| .class1.class2 | id和class選擇器和選擇器連寫的時候中間沒有分隔符，.和 # 本身充當分隔符的元素 |
| element#id | id和class選擇器和選擇器連寫的時候中間沒有分隔符，.和 #本身充當分隔符的元素 |
例如：
div>p{
font-size: 20px;
}
3、屬性選擇器
| 選擇器 | 含義 |
|---|---|
| E[attr] | 匹配所有具有屬性為attr的元素（div[id]能選擇所有具有id屬性的div） |
| E[attr=value] | 匹配所有屬性為value的元素（div[type=text]匹配id=text的div） |
| E[attr~=value] | 匹配所有屬性attr具有多個空格分隔，其中一個值等于value的元素 |
| E[attr ^=value] | 匹配屬性attr的值以value開頭的元素 |
| E[attr $=value] | 匹配屬性attr的值以value結尾的元素 |
| E[attr *=value] | 匹配屬性attr的值包含value的元素 |
例如：
p[color="red"]{
line-height:20px;
}
4、偽類選擇器
| 選擇器 | 含義 |
|---|---|
| E:first-child | 匹配元素E的第一個子元素 |
| E:last-child | 匹配元素e的最后一個子元素 |
| E:nth-child(n) | 匹配其父元素的第n個子元素，第一個編號為1 |
| E:first-of-type | 匹配父元素下使用同種標簽的第一個子元素，等同于nth-of-type(1) |
| E:hover | 匹配鼠標懸停智商的e元素 |
| E:focus | 匹配獲得焦點的e元素 |
例如：
a:hover{
color:red;
}
5、偽元素選擇器
| 選擇器 | 含義 |
|---|---|
| E::first-line | 匹配E元素的第一行 |
| E::first-letter | 匹配E元素的第一個字母 |
| E::before | 在e元素之前插入生成的內容 |
| E::after | 在e元素之后插入生成的內容 |
例如：
.clearfix::after{
content: ''; clear: both;display: block;
}
問題三：a:link, a:hover, a:active, a:visited 的順序是怎樣的？ 為什么？
- :link, a:hover, a:active, a:visited 的順序是：
a:link
a:visited
a:hover
a:active - 原因是：
當選擇器的優(yōu)先級相等時，寫在后面的會覆蓋前面的，a:link, a:hover, a:active, a:visited這四個選擇器的優(yōu)先級都一樣
當<a>標簽指向的鏈接沒有訪問過時，它處于link狀態(tài)，所以會用到a:link選擇器指定的樣式
當<a>標簽指向的鏈接被訪問過時，它同時處于link和visited狀態(tài)，而a:link和a:visited的優(yōu)先級相同，后面的會覆蓋前面的，所以用哪個樣式由它們的順序決定。
將a:visited寫在a:link后，讓訪問過的鏈接使用a:visited指定的樣式，同理，當用戶的鼠標懸停在<a>標簽指向的鏈接上時，它同時處于link，visited， hover狀態(tài)。
將a:hover寫在 a:link和a:visited之后，讓這個鏈接使用 a:hover指定的樣式
當用戶鼠標點擊<a>標簽指向的鏈接時(鼠標按住沒有松開的狀態(tài))，這個時候鏈接同時處于link, visited，hover，active四種狀態(tài)，要讓鏈接用到a:active指定的樣式，就要將a:active寫在最后。
問題四：選擇器優(yōu)先級是如何計算的?
由高到低排列：
- 屬性后+!important
- 內聯(lián)樣式：
<p style=“color: red;”> - id選擇器： #id
- 類選擇器： .class
- 偽類選擇器：a:link
- 屬性選擇器：h1{}
- 標簽選擇器：p[XXX]
- 通用選擇器：*
- 瀏覽器自定義
- !important是將對應選擇器的優(yōu)先級設置為最高級，但!important的屬性是不能繼承的！計算優(yōu)先級時通過數標簽來計算，先數id，如果id相等再數類，如果id不相等，id多的選擇器權重高，權重越高，優(yōu)先級越高。如果id選擇器數量相同，再數類選擇器，最后數標簽。
****文章著作權歸饑人谷_Shirley和饑人谷所有，轉載須說明來源****
