1.CSS選擇器常見的有幾種?
①基礎(chǔ)選擇器
- “*”：通用元素選擇器，匹配頁面任何元素
- id 選擇器(“#”)：#id 寫法是英文或數(shù)字格式臼节，中間不能有空格，頁面上所有的 id 名稱都不能一樣
- class 選擇器（“.”）: 類選擇器珊皿，.class 選擇器選取帶有指定類 (class) 的元素
- element：標簽選擇器
②組合選擇器
- E,F：多元素選擇器网缝，用 , 分隔，同時匹配元素 E 或元素 F
- E F：后代選擇器蟋定，用空格分隔粉臊，匹配 E 元素所有的后代（不只是子元素 F ）,子元素向下遞歸
- E>F：子元素選擇器，用 > 分隔驶兜，匹配 E 元素所有直接子元素
- E+F：直接相鄰選擇器扼仲，匹配 E 元素之后的相鄰的同級元素 F（也就是選中了下一個元素）
- E~F：普通相鄰選擇器，匹配 E 元素之后的同級元素 F （也就是選中了下面的所有同級元素）
- .class1.class2/element#id:id和class選擇器和選擇器連寫的時候中間沒有分隔符抄淑，. 和 # 本身充當分隔符的元素
③屬性選擇器
以某個屬性作為選擇依據(jù)（E[attr = value]）
例：div[id = test]屠凶，匹配 id = test 的 div
④偽類選擇器
- E:first-child：匹配元素E的第一個子元素
- E:hover：匹配鼠標懸停其上的E元素
- E:active：匹配鼠標已經(jīng)其上按下、還沒有釋放的E元素
- E:checked：匹配表單中被選中的radio或checkbox元素
- E:nth-child(n)：匹配其父元素的第n個子元素肆资，第一個編號為1
- E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個子元素矗愧，第一個編號為1
- E:nth-of-type(n)：與:nth-child()作用類似，但是僅匹配使用同種標簽的元素
- E:nth-last-of-type(n)：與:nth-last-child() 作用類似郑原，但是僅匹配使用同種標簽的元素
- E:last-child：匹配父元素的最后一個子元素唉韭，等同于:nth-last-child(1)
- E:first-of-type：匹配父元素下使用同種標簽的第一個子元素，等同于:nth-of-type(1)
- E:last-of-type：匹配父元素下使用同種標簽的最后一個子元素犯犁，等同于:nth-last-of-type(1)
⑤偽元素選擇器
- E::before：在E元素之前插入生成的內(nèi)容
- E::after：在E元素之后插入生成的內(nèi)容
2.選擇器的優(yōu)先級是怎樣的?（下面從高到低排列）
- !important 在屬性后面使用属愤，會覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為 style 屬性寫在元素標簽上的內(nèi)聯(lián)樣式
- id 選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標簽選擇器
- 通配符選擇器
- 瀏覽器自定義（例如 h1 默認的大小）
ps1：如果兩個選擇器規(guī)權(quán)值是一樣的酸役，那優(yōu)先級是后面的覆蓋前面的
ps2：CSS選擇器規(guī)則優(yōu)先級很簡單住诸，每個選擇器本身有優(yōu)先級驾胆，越具體優(yōu)先級越高
ps3：id選擇器的權(quán)值 > class選擇器的權(quán)值 > 標簽選擇器的權(quán)值
3.class 和 id 的使用場景(增加 name )?
- class 是指定標簽的類名。
使用場景：CSS 操作時把一些特定樣式放到一個 class 類中只壳，需要此樣式的標簽俏拱，可以在添加此類。 - id 指定標簽的唯一標識吼句。
使用場景：①根據(jù)提供的唯一 id 號锅必，快速獲取標簽對象。 ②用于充當 label 標簽 for 屬性的值惕艳。 - name 指定標簽的名稱搞隐。
使用場景：① form 表單。② input type='radio'單選標簽远搪。
4.使用 CSS 選擇器時為什么要劃定適當?shù)拿臻g谁鳍？
- 方便代碼的管理與維護
- 提高代碼的可讀性
- 避免與他人代碼相沖突
5.以下選擇器分別是什么意思?
#header{ /* 選擇 id="header" 的元素 */
}
.header{ /* 選擇 class="header" 的元素 */
}
.header .logo{ /* 選擇父輩為 class="header" 中 class="logo"的元素 */
}
.header.mobile{ /* 選中 class 同時又 header 和 mobile 的元素 */
}
.header p, .header h3{ /* 選中 class="header" 中的 p 元素和 h3 元素 */
}
#header .nav>li{ /* 選中 id="header" 下 class="nav" 中的所有 li 子元素*/
}
#header a:hover{ /* 選中 id="header" 下子元素鼠標懸停在 a 鏈接上時的樣式設(shè)置*/
}
6.列出你知道的偽類選擇器
- E:first-child：匹配元素E的第一個子元素
- E:hover：匹配鼠標懸停其上的E元素
- E:active：匹配鼠標已經(jīng)其上按下癞季、還沒有釋放的E元素
- E:checked：匹配表單中被選中的radio或checkbox元素
- E:nth-child(n)：匹配其父元素的第n個子元素，第一個編號為1
- E:nth-last-child(n)：匹配其父元素的倒數(shù)第n個子元素倘潜，第一個編號為1
- E:nth-of-type(n)：與:nth-child()作用類似绷柒，但是僅匹配使用同種標簽的元素
- E:nth-last-of-type(n)：與:nth-last-child() 作用類似，但是僅匹配使用同種標簽的元素
- E:last-child：匹配父元素的最后一個子元素涮因，等同于:nth-last-child(1)
- E:first-of-type：匹配父元素下使用同種標簽的第一個子元素废睦，等同于:nth-of-type(1)
- E:last-of-type：匹配父元素下使用同種標簽的最后一個子元素，等同于:nth-last-of-type(1)
7. :first-child 和 :first-of-type 的作用和區(qū)別
first-child 定義匹配元素中第一個子元素养泡，而 first-of-type 定義匹配父元素下使用同種標簽的第一個子元素嗜湃。下面我們給兩個對比的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.box>h1:first-of-type{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div>
<h1>我是標題1</h1>
</div>
<h1>我的標題2</h1>
<p>我的段落1</p>
</div>
</body>
</html>
上面這串代碼我們用到了 :first-of-type 我們在瀏覽器中得到如下圖的效果：
first-of-type.png
接下來我們將上面代碼中的
:first-of-type 修改為 :first-child 我們得到下面這個效果，可以很明顯的看到我們的命令并沒有生效澜掩。
first-child(1).png
當我們將代碼修改為這樣的時候：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.box>h1:first-child{
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<h1>我的標題2</h1>
<div>
<h1>我是標題1</h1>
</div>
<p>我的段落1</p>
</div>
</body>
</html>
我們就可以得到我們想要的效果购披，如下圖：
first-child(2).png
<strong>我們可以得到這樣的結(jié)論，:first-of-type 會自動尋找 box 下的 h1 元素肩榕，無論中間穿插了多少別的元素今瀑；而 :first-child 它只能根據(jù) box 中第一個子元素來進行命令，若第一個不是 h1 元素点把，則它就找不到 box 下的 h1 元素橘荠，命令無法生效。
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>
代碼效果圖如下：
代碼顯示.png
- 藍色背景：由于 :first-of-type 是取同種標簽的第一個元素，而 div 中 p 元素僅有一個褒翰，但是 h3 元素有兩個選擇第一個贮懈，所以出現(xiàn) ccc 沒有藍色背景的情況
- 紅色字體：:first-child 匹配 item1 的第一個子元素匀泊，可想而知僅為 p 變成紅色字體
9. text-align: center 的作用是什么，作用在什么元素上朵你？能讓什么元素水平居中
- 作用：使元素水平居中
- 作用元素：塊級元素
- 能讓什么元素水平居中：塊級元素內(nèi)部的行內(nèi)元素
10.如果遇到一個屬性想知道兼容性各聘，在哪查看?
利用 can i use 即可查詢
<strong>本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請注明出處
