課程目標
- 掌握常見 CSS 選擇器的用法
- 對選擇器優(yōu)先級有一定認識
課程任務
1. CSS選擇器常見的有幾種?
- id 選擇器
- class 選擇器
- 屬性選擇器襟齿，以某個屬性作為選擇依據(jù)。
- 分組選擇器，可以對選擇器進行分組速缆，被分組的選擇器對應的元素就有相同的樣式已脓。用逗 號將需要分組的選擇器分開鸭栖。
- 派生選擇器疯坤，選擇某個元素下的子元素编曼，通常用于作用域隔離僧凤。
CSS3常用選擇器：
- :first-of-type 從一組中選擇第一個元素
- :last-of-type 從一組中選擇最后一個元素
拓展閱讀：
2. 選擇器的優(yōu)先級是怎樣的?
從高到低分別是
- 在屬性后面使用 !important 會覆蓋頁面內(nèi)任何位置定義的元素樣式畜侦。
- 作為 style 屬性寫在元素標簽上的內(nèi)聯(lián)元素。
- id 選擇器
- class 選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義
選得越精確拼弃，越快夏伊，權(quán)重就越高
3. class 和 id 的使用場景?
- class 使用場景：CSS操作，把一些特定樣式放到一個 class 類中吻氧。
- id 使用場景: 快速獲取標簽溺忧；或者用于充當 label 標簽 for 屬性的值咏连。
4. 使用CSS選擇器時為什么要劃定適當?shù)拿臻g？
- 提高代碼可讀性鲁森。
- 便于維護
5. 以下選擇器分別是什么意思?
#heder {} /* id 是 header的標簽 */
.header {} /* class 是 header 的標簽 */
.header .logo {} /* 派生選擇器祟滴，"父"是 .header ，“后代”是 .logo 的標簽 */
.header.mobile {} /* class 同時是 .header 和 .mobile 的標簽 */
.header p, .header h3 /* 分組選擇器歌溉，同時選擇 “父”是.header “后代”是 p標簽 和 “父”是.header “后代”是 h3標簽 */
#header .nav>li {} /* “父”是#header “后代”是 .nav 的子標簽（注意跟垄懂，孫標簽區(qū)分） */
#header a:hover {} /* “父”是 #header “后代”是 a標簽的偽類 */
6. 列出你知道的偽類選擇器
- :hover
- :link
- :active
- :fist-child
- :first-of-type
- :nth-of-child()
- :nth-of-type()
- :last-child
- :last-of-type
- :focus
拓展閱讀：
7. :first-child 和 :first-of-type 的作用和區(qū)別
:first-child 是選擇XX父元素的第一個且"對應的"子元素。（限定順序上的第一個）（若找不到該“對應的”子元素痛垛，此樣式無效）草慧。
:first-of-type 是選擇XX父元素“對應類型”的第一個。（不限定是順序上的第一個）（可以同時有不同的類型 type ）
8. 運行如下代碼匙头，解析下輸出樣式的原因漫谷。
<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>
task8-8.png
-
.item1:fisrt-child，對應(.item1)的child是第一個子元素p(其父元素是.ct)蹂析。
所以選擇<p class="item1">aa</p>舔示。 -
.item1:first-of-type，對應(.item)的type有p和h3电抚。
所以選擇<p class="item1">aa</a>和<h3 class="item1">bb</bb>惕稻。
9. text-align: center 的作用是什么，作用在什么元素上蝙叛？能讓什么元素水平居中
text-align: center令元素水平居中俺祠，作用在塊級元素上，讓塊級元素內(nèi)部的行內(nèi)元素水平居中甥温。
