web前端(8) CSS選擇器

2022-05-13 13:50:44 字數 3354 閱讀 4893

選擇器,說白了就是html的標籤或者其相關特性,在乙個html頁面中會有很多很多的元素,不同的元素可能會有不同的樣式,某些元素又需要設定相同的樣式,選擇器就是用來從html頁面中查詢特定元素的,找到元素之後就可以為它們設定樣式了。 選擇器為樣式規則指定乙個作用範圍

基本選擇器包含以下選擇器:標籤選擇器說白了就是html的標籤元素,就像前面說的h1-h6,p,div,form,ul,ol,li,a等等的,這些都可以是標籤選擇器

注意:,也可以作為標籤選擇器

左邊我圈出來的class = 's_ipt'就是input的乙個類屬性,右邊的css就是由類選擇器控制的,這樣就可以很好的找到此特有的標籤

注意:

id選擇器和類選擇器很類似

我圈出來的這個 id=『kw』 就是id選擇器,右邊的#kw就是其id選擇器的css樣式

注意:

通用選擇器的就乙個,用【*】代替,例:

*

* 號相信稍微是個愛研究的人都見過,在windows系統裡表示萬用字元,可以代替一切的字元,在it它也是這麼個用法,可以表示一切字元,那麼這裡的自然表示所有的標籤

組合選擇器就是比較高階的用法,有時候我們可能只運用上面的基本選擇器不是很方便,那麼就可以用組合選擇器

組合選擇器包含有:

說這個之前,我希望您有這種思想,把html結構想成一顆大樹,樹上有很多的枝葉,每個枝裡又有很多小枝,這樣的話你可能會更好理解下面的,對以後的理論也更好理解

好的,接正文,子代選擇器即就是選擇此元素的直系子代,例:

div > p

以上例子就是選擇div裡的直系子代裡的p標籤

後台選擇器和前面的子代選擇器有些類似,不過後代是包含子代在內的所有子子孫孫標籤

例:

div  p

以上表示選取div下的所有p標籤,不管是不是直系子代

相鄰選擇器有兩個,乙個是前者(哥哥),乙個後者(弟弟)

前者,用+

div+p 

後者,用~

div~p 

高階選擇器裡包含有並集,交集

並集,用逗號連線

div,p,a

交集,直接連線,中間沒有空格

交集用個完整的html來講解,可能大家才更好理解

test1

test2

test3

test4

測試結果:

屬性選擇器的特點就是可以很好的定位到人為定義的屬性,而不是已經有的屬性,比如給html檔案加乙個特殊標識,用屬性選擇器立馬就可以取到,並進行調整樣式

屬性選擇器如果細分的話,有兩種,乙個是屬性選擇器,乙個是屬性-值選擇器

test1

注意:屬性選擇器的語法是[……]而屬性選擇器最常用的就是表單:

input[type="text"] 

當多個元素的樣式相同的時候,我們沒有必要重複地為每個元素都設定樣式,我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式

其實這個分組選擇就是前面高階選擇器裡的並集選擇器,為什麼它又叫分組選擇器,就是因為很重要啦

h1,h2 

偽類的意思就本來不存在的類,但是其又可以用

這個最常用的是對a和input標籤的選取

偽類選擇器有:

:link

:active

:visited

:hover

:focus

表示沒有訪問的鏈結

a:link 

表示滑鼠點選瞬間

a:active 

表示訪問過,點選過的鏈結

a:visited 

表示游標放上去但還未點選的狀態

p:hover 

input輸入框獲取焦點時(即正處於在輸入框輸入內容時)樣式

input:focus 

以上最常用的就是:hover

偽元素的概念和偽類很像,意思就是本來不存在的,但是又可以直接是用的

偽元素有:

用於為文字的首字母設定特殊樣式,說白了就是那種文章首字母大寫的效果

p:first-letter 

用於在元素的內容前面插入新內容

p:before 

用於在元素的內容後面插入新內容

p:after 

學完以上的各種各樣的選擇器,那麼當然以上的各種選擇器是可以混用的,那麼混用的話,就會存在乙個問題,假如各種混用的選擇器剛好都對同乙個元素選中並設定不同的樣式,這種的話,到底會顯示什麼樣呢?

這個問題也當然不是問題,因為每個選擇器都有優先順序(又叫權重)的,優先順序高就選擇誰

各種選擇器的優先順序:

權重總結:

1.先看標籤是否被選中,如果選中,就數id選擇器和類選擇器,標籤選擇的權重,最後誰的權重大就顯示誰的,如果權重一樣大,後者覆蓋前者

2.如果沒有選中,權重為0,如果權重都是由父級繼承而來,且權重都是0,遵循就近原則,誰描述的近就顯示誰

3.!import權重最大

4.css多層巢狀,內層元素會繼承外層元素的css樣式

Web 前端 CSS選擇器

選擇器 選擇器類選擇器 類選擇器 三年級時,我還是乙個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績...

Web前端 CSS選擇器

本文介紹css的選擇器,包括元素選擇器 id選擇器 類選擇器 屬性選擇器 後代選擇器 子元素選擇器 相鄰兄弟選擇器。本文內容結合w3c教程編寫 1 元素選擇器 又稱型別選擇器 type selector 是最常見的css選擇器,文件的元素就是選擇器,比如p h1 甚至html本身。p h12 id選...

WEB前端 CSS常用選擇器

1.1 標籤選擇器 就是用標籤名來當做選擇器。1 所有標籤都能夠當做選擇器,比如body h1 dl ul span等等 2 不管這個標籤藏的多深,都能夠被選擇上。3 選擇的是所有的,而不是某乙個。所以是共性,而不是特性。1 a 表示選擇id 1 lj1 2 同乙個頁面內id不能重複,即使不一樣的標...