基礎選擇器的型別

2021-10-10 09:09:40 字數 2130 閱讀 9232

1.選擇器的作用

規範了頁面中哪些元素能夠使用定義好的樣式,選擇器就是乙個條件,符合這個條件的元素,都可以使用定義好的樣式

2.選擇器的詳解

①通用選擇器

*所有元素都要匹配這個樣式

盡量少用, 因為效率非常低

css reset 樣式重置.由於不同瀏覽器對同一篇**的解析有可能不同,需要把一些樣式進行統一,或者清除.這種行為就叫做css reset

②標籤選擇器,元素選擇器

一般用於定義某種元素的共用樣式

元素名稱

頁面中所有對應元素,都要應用這個樣式

③id選擇器

只對當前頁面中,乙個標籤生效

一般專案中id選擇器,單獨使用比較少,

專案中#id選擇器通常用於後代和自帶選擇器的第一部分

#p1

④類選擇器

定義頁面上的乙個樣式片段,哪個元素要用,就是用class呼叫,可以不停的被呼叫

.類名宣告類名有點

呼叫類名沒有點

類選擇器的特殊使用方式

1.多類選擇器,乙個class,引用多個類名

類選擇器

2.分類選擇器

①標籤選擇器.類選擇器

呼叫這個類名的這個標籤,應用這個樣式,提公升權值

② .類選擇器 .類選擇器

同時引用了這兩個類選擇器的標籤,應用這個樣式

注意,類名的定義規則

1.定義類選擇的時候,點不能省略

2.類名不能以數字開頭

3.只能包含-_

4.見名知意

⑤.群組選擇器

選擇器1,選擇器2,選擇器3,選擇器4…

⑥.後代選擇器

元素的後代關係,匹配元素

後代關係,一級或者多於一級的巢狀

選擇器1 選擇器2 選擇器3…

⑦.子代選擇器

通過元素的子代關係,匹配元素

子代關係,一級的巢狀

選擇器1>選擇器2>選擇器3…

後代選擇器和子代選擇器可以混寫

比如 #d1 p>span{} #d1 >p span{}

⑧.偽類選擇器

匹配元素不同狀態下的樣式

1.鏈結未被訪問時的狀態

:link

2.鏈結已訪問的狀態

:visited

3.滑鼠懸停時的狀態

:hover

4.元素被啟用時的狀態

:active

5.元素獲取焦點時的狀態

::focus

⑨選擇器權值問題

!important >1000

內聯樣式 1000

id選擇器 100

類選擇器 10

偽類選擇器 10

元素選擇器 1

通用選擇器* 0

繼承的樣式 無

權值:表示當前選擇器的重要程度,權值越大優先順序越高

特點:1.當乙個選擇器中含有多個選擇器時,需要將所有選擇器的權值進行相加,結果越大優先順序越高

2.權值相同,使用就近原則

3.群組選擇器權值不能相加,單獨計算

4.樣式後面新增了!important 直接獲得最高權值,內聯樣式不能新增!important

權值計算結果不能超這個權值的最大數量級(一百個1相加,也比10小)

基礎選擇器 復合選擇器

1 標籤選擇器 元素選擇器 標籤選擇器是指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。其基本語法格式如下 標籤名 或者 元素名 2 類選擇器 類選擇器使用 英文點號 進行標識,後面緊跟類名,其基本語法格式如下 類名標籤呼叫的時候用class 類名 即可。1....

CSS基礎選擇器 類選擇器 id選擇器

選擇器的作用 根據不同的需求把不同的標籤選出來 是由單個選擇器組成的 包括 標籤選擇器 類選擇器 id選擇器 萬用字元選擇器 1 標籤選擇器 指用html標籤名稱作為選擇器,按標籤名稱分類,為頁面中某一類標籤指定統一的css樣式。優點 能夠快速為頁面中同型別的標籤統一設定樣式。缺點 不能設計差異化樣...

CSS選擇器之基礎選擇器

選擇器 選擇符 就是根據不同需求把不同的標籤選出來這就是選擇器的作用。簡單來說,就是選擇標籤用的。標籤選擇器 又稱元素選擇器,指用html標籤作為選擇器,為頁面中某類標籤設定css樣式。缺點 不能差異化設定樣式,只能選擇全部的當前標籤。語法 基礎選擇器之標籤選擇器title 標籤選擇器 寫上標籤名 ...