常見的CSS選擇器
- 基礎(chǔ)選擇器（*位谋，#id，.class，element）
- 組合選擇器
- 屬性選擇器（h1购裙，p，a...）
- 偽類選擇器
- 偽元素選擇器
選擇器的優(yōu)先級(jí)
從高到低分別是
- 在屬性后面使用鹃栽！important覆蓋頁面內(nèi)任何位置定義的元素樣式
- 作為style屬性寫在元素標(biāo)簽上的內(nèi)聯(lián)樣式
- id選擇器
- 類選擇器
- 偽類選擇器
- 屬性選擇器
- 標(biāo)簽選擇器
- 通配符選擇器
- 瀏覽器自定義
class和id的使用場景
- id選擇器躏率，只匹配特定id的元素
- class選擇器，匹配包含特定class的元素
使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g
命名規(guī)則參考
選擇器的命名在各瀏覽器下的支持情況有所不同民鼓。因此薇芝，如果選擇器的命名不規(guī)范，將影響各瀏覽器下丰嘉，樣式渲染不一致夯到。
以下選擇器的意思
-
#header{}
id為header的元素 -
.header{}
類名包含header的元素 -
.header .logo{}
類名包含header的元素的后代中類名包含logo的 -
.header.mobile{}
類名包含header和mobile的元素 -
.header p, .header h3{}
類名包含header的元素中的p元素和h3元素 -
#header .nav>li{}
id為header的元素的類名包含nav的子元素的直接子元素li -
#header a:hover{}
id為header的子元素a的鼠標(biāo)懸停效果
偽類選擇器
- E:first-child，匹配第一個(gè)子元素且為元素E
- E:first-of-type饮亏，匹配子元素為E的其中第一個(gè)耍贾，等同于:nth-of-type(1)
- E:link阅爽，匹配所有未被點(diǎn)擊的鏈接
- E:visited，匹配所有已被點(diǎn)擊的鏈接
- E:active荐开，匹配鼠標(biāo)已經(jīng)其上按下付翁、還沒有釋放的E元素
- E:hover，匹配鼠標(biāo)懸停其上的E元素
- E:focus晃听，匹配獲得當(dāng)前焦點(diǎn)的E元素胆敞，常用于輸入框
- E:checked，匹配表單中被選中的radio或checkbox元素
- E::selection杂伟，匹配用戶當(dāng)前選中的元素
- E:nth-child(n)移层，匹配其父元素的第n個(gè)子元素，第一個(gè)編號(hào)為1
- E:nth-last-child(n)赫粥，匹配其父元素的倒數(shù)第n個(gè)子元素观话，第一個(gè)編號(hào)為1
- E:nth-of-type(n)，與:nth-child()作用類似越平，但是僅匹配使用同種標(biāo)簽的元素
- E:nth-last-of-type(n)频蛔，與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
- E:last-child秦叛，匹配父元素的最后一個(gè)子元素晦溪，等同于:nth-last-child(1)
- E:last-of-type，匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素挣跋，等同于:nth-last-of-type(1)
- n的取值：1三圆，2，3...2n+1, 2n, 4n-1...odd, even
:first-child和:first-of-type的作用和區(qū)別
- E:first-child避咆，匹配第一個(gè)子元素且須為元素E舟肉，若第一個(gè)子元素不是E元素，則不選擇
- E:first-of-type查库，匹配子元素為E的其中第一個(gè)路媚，
即將子元素中的元素E選出，選擇其中第一個(gè)
讀代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>readcode</title>
<style>
.item1:first-child {
color: red;
}
.item1:first-of-type {
background: blue;
}
</style>
</head>
<body>
<div class="ct">
<p class="item1">aa</p>
<h3 class="item1">bb</h3>
<h3 class="item1">ccc</h3>
</div>
</body>
</html>
- aa作為第一個(gè)子元素也是第一個(gè)P元素同時(shí)被.item1:first-child和.item1:first-of-type選擇
- bb作為第一個(gè)H3元素被.item1:first-of-type選擇
- ccc沒有被選擇
text-align: center的作用以及對(duì)象
- 作用：文本居中
- 作用在塊級(jí)元素上
- 可以讓塊級(jí)元素中的文字或行內(nèi)元素居中
如果遇到一個(gè)屬性想知道兼容性樊销，在哪查看?
本教程版權(quán)歸饑人谷和作者所有整慎，轉(zhuǎn)載須說明來源。
