目錄
這幾天一直在學習CSS基礎,學習和接觸了很多的東西,首先對於CSS中的選擇器進行一個小小的總結。選擇器分爲基礎選擇器和複合選擇器兩個大類。首先是基礎選擇器:
基礎選擇器
具有兩個特徵:
- 由單個選擇器組成的
- 包括標籤選擇器、類選擇器、id選擇器和通配符選擇器
------》標籤選擇器
是指用HTML標籤名稱作爲選擇器,按標籤名稱分類,爲頁面中的某類標籤指定統一的CSS樣式。例如:對所有的<div>和所有的<span>標籤進行設置
優點:快速爲頁面中同類型的標籤統一設置樣式
------》類選擇器
如果想要差異化選擇不同的標籤,單獨選一個或者某幾個標籤,可以使用類選擇器,類選擇器在HTML中以class屬性表示,在CSS中,類選擇器以一個點"."號顯示
注意
①類選擇器使用““(英文點號)進行標識,後面緊跟類名(自定義,我們自己命名的).
②可以理解爲給這個標籤起了一個名字,來表示
③長名稱或詞組可以使用中橫線來爲選擇器命名。
④不要使用純數字、中文等命名,儘量使用英文字母來表示
⑤命名要有意義,儘量使別人一眼就知道這個類名的目的。
⑥命名規範:見附件(Web前端開發規範手冊doc
記憶口訣:樣式點定義,結構類調用。一個或多個,開發最常用
如果一個標籤具有兩個及以上類名的樣式,那麼就可以使用多類名選擇器。
注意:
- 各個類名中間用空格隔開
- 簡單理解:就是給某個標籤添加了多個類,或者這個標籤有多個名字
- 這個標籤就可以分別具有這些類名的樣式
- 從而節省CSS代碼統修改也非常方便
- 多類名選擇器在後期佈局比較複雜的愾況下,還是較多使用的
{例如:以下具有類選擇器和標籤選擇器的使用}
注意:
類選擇器的命名是有一些規定的,命名上都有一定的規則,參考鏈接附上:
https://blog.csdn.net/xiongdaandxiaomi/article/details/96115538
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width:200px;
height:200px;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="red"></div>
</body>
</html>
-----》id選擇器
id選擇器和類選擇器差不多,id選擇器在HTML中以id屬性表示,在CSS中,類選擇器以一個點"#"號顯示。應用上也是差不多,但是id選擇器和類選擇器有一些區別。
- 類選擇器( class)好比人的名字,一個人可以有多個名字,同時一個名字也可以被多個人使用
- id選擇器好比人的身份證號碼全中國是唯的,不得重複
- id選擇器和類選擇器最大的不同在於使用次數上【前者一次,後者可多次】
- 類選擇器在修改樣式中用的最多,id選擇器般用於頁面唯一性的元素上,經常和 JavaScript配使用
-----》通配符選擇器
*代表了一切。對所有的標籤進行設置,用的比較少
複合選擇器
複合選擇器建立在基礎選擇器之上,是基本選擇器進行組合形成的。
- 複合選擇器可以更準確、更高效的選擇目標元素
- 複合選擇器由兩個或多個基礎選擇器,通過不同的方式組合而成。
- 常用複合選擇器:後代選擇器、子選擇器、並集選擇器和僞類選擇器
-----》後代選擇器
又稱爲包含選擇器,可以選擇父類元素裏面的子元素,寫法如下:
注意:
- 元素1和元素2中間用空格隔開
- 元素1是父級,元素2是子級,最終選擇的是元素2
- 元素2可以是兒子,也可以是孫子等,只要是元素1的後代即可
- 元素1和元素2可以是任意基礎選擇器
-----》子選擇器
只能選擇作爲某元素的最近一級子元素,簡單理解就是選親兒子元素。語法:元素1>元素2{樣式聲明}.【只能是直接後代】
-----》並集選擇器
並集選擇器可以選擇多組標籤同時爲他們定義相同的樣式。通常用於集體聲明井集選擇器是各選擇器通過英文逗號(,)連接而成,任何形式的選擇器都可以作爲並集選擇器的部分。
元素1,元素2{樣式聲明}
-----》僞類選擇器
----》鏈接僞類選擇器
-----》focus僞類選擇器
用於選取獲得焦點的表單元素