什么是CSS選擇器
CSS選擇器的作用就是按照CSS規(guī)定定位HTML頁面的一個或多個元素蒿往。瀏覽器在解析HTML頁面時忽洛，回根據(jù)CSS對著中的選擇器定位HTML頁面的元素锭碳，并為對應的元素設定樣式
選擇器的分類
在標準中是沒有分類的涣楷，為了方便學習自己分類
基本選擇器
共有五個基本選擇器分唾，是CSS選擇器的最為基本的用法
元素選擇器
也稱為類型選擇器通過HTML元素的class屬性來設置CSS樣式。
因此,在單獨使用時,尋找特定類型的元素時,元素選擇器都會匹配該文檔中所有此類型的元素狮斗。
- 語法結(jié)構(gòu)
元素名稱 {
屬性名稱:屬性值;
屬性名稱:屬性值;
...
}
- 代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器測試</title>
<style>
change{
color:brown
}
</style>
</head>
<body>
<change>啟嘉班成員很奈斯</change>
</body>
</html>
- 代碼效果
類選擇器
類選擇器就是通過HTML元素的class屬性值來設置CSS樣式
類屬性被定義為一個以空格分隔的列表項绽乔，在這組類名中，必須有一項與類選擇器中的類名完全匹配碳褒，此條樣式聲明才會生效折砸。
- 語法結(jié)構(gòu)
.className {
屬性名稱:屬性值;
屬性名稱:屬性值;
...
}
- 示例代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器測試</title>
<style>
.change{
color:gray
}
</style>
</head>
<body>
<change class="change">啟嘉班成員很奈斯</change>
<!-- class屬性的值：與類選擇器一一對應 -->
</body>
</html>
- 代碼效果
ID選擇器
ID選擇器就是通過HTML元素的id 屬性值來設置CSS樣式
元素 ID 屬性名必須與選擇器中的 ID 屬性名完全匹配，此條樣式聲明才會生效
- 語法結(jié)構(gòu)
#id {
屬性名稱:屬性值;
屬性名稱:屬性值;
...
}
- 代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器測試</title>
<style>
#change{
color:red
}
</style>
</head>
<body>
<change id="change">啟嘉班成員很奈斯</change>
<!-- id屬性唯一沙峻，不可超重復 -->
</body>
</html>
- 代碼效果
HTML不是一個嚴謹?shù)恼Z言睦授，即使編寫錯誤也不會報錯
頁面開發(fā)不要以最終運行結(jié)果為準，要以頁面最終效果為準
通配符選擇器
CSS2引入的摔寨，顯示為一個星號(*)該選擇器可以與任何元素匹配睹逃，就是一個通配符
- 語法結(jié)構(gòu)
* {
屬性名稱:屬性值;
屬性名稱:屬性值;
...
}
- 代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器測試</title>
<style>
* {
color:red
}
</style>
</head>
<body>
<change>啟嘉班成員很奈斯</change>
<br>
<change.tm>啟嘉網(wǎng)牛逼</change.tm>
</body>
</html>
- 代碼效果
應用：用來設置當前HTML頁面的默認樣式
問題：該選擇器的性能不好
屬性選擇器
通過已經(jīng)存在的屬性名或?qū)傩灾灯ヅ湓亍?/p>
- 語法結(jié)構(gòu)
[HTML屬性元素]{
屬性名稱:屬性值;
屬性名稱:屬性值;
...
}
- 代碼示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>選擇器測試</title>
<style>
[name] {
color:red
}
<!--表示帶有以name命名的屬性，且屬性值為 value 的元素-->
[name=value] {
color:royalblue;
}
</style>
</head>
<body>
<change name="haha">啟嘉班成員很奈斯</change>
<br>
<change name="text">啟嘉網(wǎng)牛逼</change>
</body>
</html>
- 代碼效果
