關於css選擇器的使用,一共可以分為3種:
(1)標籤選擇器:根據標籤名匹配所有的該元素
(2)id選擇器:根據元素的 id 屬性值匹配文件中惟一的元素,id具有唯一性,不能重複使用
(3)class選擇器
在使用上通俗一點說,如果想讓某個標籤在頁面中統一具有某種樣式,使用標籤選擇器比較合適。如果乙個標籤想使用其他標籤不同的樣式,使用id選擇器進行定義,然後呼叫比較合適。如果想讓某些標籤都可以擁有一些共有方法,使用class選擇器比較合適。
下面依次介紹:
(1)標籤選擇器:顧名思義,直接對標籤進行樣式設計,以**為例:
hello kitty
hello 佩奇
可以看到,直接使用內嵌寫法,在頁面中使用標籤,在其中定義了乙個標籤的樣式,字型為藍色的定義,之後在使用標籤的時候,所有的字型顏色就被設定成了藍色
(2)id選擇器:使用id的方法
hello kitty
hello 佩奇
在上乙個**的基礎上,增加了乙個#div2的樣式,注意:使用id標籤定義的時候,在開頭需要乙個「#」表示id,在頁面中使用id=「」的方法呼叫定義好的樣式
(3)class選擇器:class定義好一些屬性後,所有的標籤均可呼叫使用,具體使用方法如下:
今天明天
可以看到,我們定義可乙個字型為藍色的方法,使用class=「"方法可以呼叫此方法,無論使用此方法的標籤為p,div,還是h3,最終在顯示內部字顏色的時候,字都為藍色。
之後還有群組選擇器:(群組選擇器中,每個標籤之間使用逗號進行分隔)
表示div,p,h3中字型顏色都為橘色
今天
明天
後代選擇器 :(後代選擇器中,每個標籤之間使用空格分隔)
div p
上面的**可以理解為:div標籤下的p標籤,將顏色統一為設定的顏色(div為父標籤,p為div下的子標籤)
今天
明天我是乙個子類元素
繼上面的**,雖然給標籤定義了藍色,但是由於下面新加了乙個定義,div下的p標籤為藍色,所以下面的最後一行文字字為藍色
關於css選擇器的總結
關於css選擇器的總結 css選擇器大體上可以分為三種分別是 簡單選擇器 屬性選擇器還有偽類選擇器。一 簡單選擇器中可以通過三種分類 id class type,這三種選擇器分別是按重要性遞減來排序,id選擇器可以視為身份證,class和type都可以當成分類,這就說明id可以當成唯一識別符號,id...
css選擇器 CSS選擇器總結
在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...
關於CSS選擇器
通用選擇器 這個選擇器不經常用,看著省事,問題也有。標籤選擇器 html標籤都可以進行設定,但是常用的如ul,li,a標籤等最好還是給乙個class或者id,乙個頁面中如果有多個相同標籤,容易混淆。類選擇器 類選擇器用得比較多,也比較方便。同乙個類名可以賦給多個標籤,同樣設定了樣式也可以進行重複使用...