css選擇器的介紹

2021-10-01 05:01:53 字數 2644 閱讀 2201

1.什麼是 標籤選擇器?

作用:根據指定的標籤名稱,在當前介面中找到所有該名稱的標籤,然後設定屬性。

基本格式:

標籤名稱

注意點:

1.標籤選擇器選中的是當前頁面中所有該型別的標籤。

2.標籤選擇器就算該標籤套在其他的標籤裡也能被選中。

3.只要是html中的標籤就可以作為標籤選擇器,如

1.什麼是id選擇器?

作用:根據指定的id名稱找到對應的標籤,然後設定屬性。

基本格式:

#id名稱

注意點:

1.每個html標籤都有乙個屬性叫做id,也就是說每個標籤都可以設定id。

2.在同乙個頁面中每個標籤的id名稱是不可以重複的。

3.在編寫id選擇器時一定要在id名稱前面加上#。

4.id名稱在使用時是有一定規範的,id的名稱只能有字母,數字,下劃線;但是id的名稱不能以數字開頭。

5.id名稱不能是html中的標籤。

6.在企業開發中如果僅僅是為了設定樣式,我們不會使用id的,因為在前端開發中id是留給js使用的。

1.什麼是類選擇器?

作用:根據指定的類名稱找到對應的標籤,然後設定屬性。

基本格式:

.類名注意點:

1.每個html標籤都有乙個屬性叫做class,也就是說每個標籤都可以設定類名。

2.在同乙個頁面中class的名稱是可以重複的。

3.在編寫類選擇器時一定要在類名前加上.

4.類名的規範和id名稱的規範是一樣的。

html中的格式:

class=「名稱」

class=「名稱 名稱 名稱·····」

1.什麼是後代選擇器?

作用:根據指定標籤的所有後代標籤,然後設定屬性。

基本格式:

標籤名稱1 標籤名稱2 ···

格式解釋:

先找到所有叫做標籤名稱1的標籤,然後再找到標籤名稱1中所有名叫標籤名稱2的標籤,然後設定屬性。

注意點:

1.後代選擇器必須用空格隔開。

2.後代指的是所有後代。

1.什麼是子元素選擇器?

作用:找到指定標籤中所有特定的直接子元素,然後設定屬性。

基本格式:

標籤名稱1>標籤名稱2

格式解釋:

先找到所有叫做標籤名稱1的標籤,然後再找到標籤名稱1中所有直接子元素名叫標籤名稱2的標籤,然後設定屬性。

注意點:

1.子元素選擇器只會查詢兒子,不會查詢其他巢狀元素的標籤。

2.子元素選擇器之間需要用》符號連線,並且不能用空格。

1.什麼是交集選擇器?

作用:給所有選擇器選中的標籤中,相交的那部分標籤設定屬性。

基本格式:

標籤名稱1標籤名稱2

注意點:

1.選擇器和選擇器之間沒有任何的連線符號。

1.什麼是並集選擇器?

作用:給所有選擇器選中的標籤設定屬性。

基本格式:

標籤名稱1,標籤名稱2

注意點:

1.選擇器和選擇器用,連線。

作用:給指定的選擇器後面緊跟的那個選擇器選中的標籤設定屬性。

基本格式:

標籤名稱1+標籤名稱2

注意點:

1.選擇器和選擇器之間用加號連線。

2.相鄰兄弟選擇器只能選中緊跟其後的那個標籤,不能選中被隔開的標籤。

作用:給指定的選擇器後面所有的標籤設定屬性。

基本格式:

標籤名稱1~標籤名稱2

注意點:

1.選擇器和選擇器之間用~連線。

2.通用選擇器選中的是後面所有的標籤,隔開的標籤也能被選中。

CSS選擇器介紹

由於這次專案突破性的選擇了做前台,所以開始學習css 選擇器的幾種格式 1 派生選擇器 1 body pbody中所有的p標籤都會滿足這一屬性,即使巢狀多層依舊滿足這個條件 2 body p 這樣只有body中第一層p標籤會被賦予這個屬性 可以和第一種方法結合起來用 2 id選擇器 1 tag將id...

CSS選擇器介紹

由於這次專案突破性的選擇了做前台,所以開始學習css 選擇器的幾種格式 1 派生選擇器 1 body pbody中所有的p標籤都會滿足這一屬性,即使巢狀多層依舊滿足這個條件 2 body p 這樣只有body中第一層p標籤會被賦予這個屬性 可以和第一種方法結合起來用 2 id選擇器 1 tag將id...

css選擇器介紹

總結什麼是css選擇器呢,首先需要了解一下css。css是 cascading 層疊 style 樣式 sheet 表 的簡稱,及層疊樣式表,css技術用來美化html頁面,html相當於蓋房子,css相當於裝修,使用css可以把樣式 和html分離。而裝修呢需要工具裝修,選擇器就是我們需要的裝修工...