- class和id的使用場景锥忿。
- CSS常見選擇器豫缨。
- 選擇器的優(yōu)先級是怎樣的?復雜場景如何計算優(yōu)先級贬芥？
- 列出你知道的偽類選擇器来庭。
以上
- a:link, a:hover, a:active, a:visited的順序是怎樣的靠益？ 為什么丧肴？
依次是：
a:link-選擇所有未被訪問的鏈接。
a:visited-選擇所有已被訪問的鏈接胧后。
a:hover-選擇鼠標指針位于其上的鏈接芋浮。
a:active-選擇活動鏈接。
原因：
與CSS樣式定義書寫原則有關壳快，因瀏覽器解釋CSS采取就近原則纸巷，所以最一般的條件放在最上面（外層），最特殊的條件放在最下面（內(nèi)層）眶痰。
鼠標經(jīng)過“未訪問鏈接”同時擁有a:link瘤旨、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義竖伯，鼠標經(jīng)過的“已訪問鏈接”同時擁有a:visited存哲、a:hover兩種屬性，后面的屬性會覆蓋前面的屬性定義黔夭。所以如CSS定義中所言宏胯，:hover 必須位于 :link 和 :visited 之后才有效，而:active必須被置于:hover之后才是有效的本姥，如果沒有指定偽類則默認為 :link肩袍。
- 以下選擇器分別是什么意思?
#header{}: 匹配id="header"的元素
.header{}: 匹配class="header"的元素
.header .logo{}: 匹配class="logo"且為class="header"的元素后代元素的元素。
.header.mobile{}: 匹配class="mobile"且class="header"的元素婚惫。
.header p, .header h3{}: 匹配class="header"的子元素p和子元素h3氛赐。
#header .nav>li{}: 匹配class=nav元素的所有子元素li魂爪，且class="nav"元素為id="header"元素的子元素。
#header a:hover{}:匹配鼠標懸停其上的a元素艰管，且a元素為id="header"的元素的子元素滓侍。
#header .logo~p{}:匹配class="logo"的元素之后的同級元素p，且lass="logo"的元素為id="header"的元素的子元素牲芋。
#header input[type="text"]{}:匹配id="header"的元素下的 type="text"的input子元素撩笆。
- div:first-child、div:first-of-type缸浦、div :first-child和div :first-of-type的作用和區(qū)別 （注意空格的作用）
div:first-child:選擇屬于其父元素的首個子元素的每個div元素夕冲。
div:first-of-type:選擇屬于其父元素的首個div元素的每個div元素，等同于:nth-of-type(1)裂逐。
div :first-child:選擇所有div元素的第一個子元素歹鱼。
div :first-of-type:選擇所有div元素下同類第一個div子元素。
區(qū)別：因為一個空格都脫離了必須是div類型的控制卜高。也可理解為不加空格是同級弥姻，加了空格是后代。
樣例：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.item1 :first-child {
color: white;
}
.item1 :first-of-type {
background: yellow;
}
</style>
</head>
<body>
<div class="item1">
<ul class="item1">
<li class="item1">dd</li>
<li>ff</li>
<li>gg</li>
<li>hh</li>
</ul>
<ol class="item1">
<li class="item1">ii</li>
<li class="item1">jj</li>
<li>kk</li>
<li>ll</li>
</ol>
<ol class="item1">
<li class="item1">ii</li>
<li class="item1">jj</li>
<li>kk</li>
<li>ll</li>
</ol>
</div>
</div>
</body>
</html>
輸出結果如下：
- 運行如下代碼掺涛，解析下輸出樣式的原因庭敦。
<style>
.item1:first-child{
color: red;
}
.item1:first-of-type{
background: blue;
}
</style>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
樣式輸出如下：
首先外層定義.item1:first-child{color: red;}，選擇屬于其父元素的首個子元素的每個class="item1"的元素薪缆。代碼中有三個class="item1"的元素p螺捐，h3，h3矮燎，屬于同級兄弟關系，所以只有第一個子元素p被選中赔癌，表現(xiàn)為文本aa字色為紅色诞外。
接著內(nèi)層定義.item1:first-of-type{background: blue;}，選擇屬于其父元素的首個class="item1"的元素的每個class="item1"的元素灾票。代碼中有三個class="item1"的元素p峡谊，h3，h3刊苍，所以p和第一個h3元素被選中既们，表現(xiàn)為背景色為藍色。
