更新時間:2021-01-19 來源:黑馬程序員 瀏覽量:
要想將CSS樣式應用于特定的HTML標記,首先需要找到該目標標記,在CSS中,執(zhí)行這一任務的樣式規(guī)則部分稱為CSS選擇器。
CSS選擇器又分為標記選擇器、類選擇器、id選擇器、通配符選擇器、標簽指定式選擇器、后代選擇器和并集選擇器,對它們的具體解釋如下。
1. 標記選擇器
標記選擇器是指用HTML標記名稱作為選擇器,按標記名稱分類,為頁面中某一類指定統(tǒng)一的CSs樣式。其基本語法格式如下:
標記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
上述語法中,所有的HTML標記名都可以作為標記選擇器,例如body、h、p、strong等。用標記選擇器定義的樣式對頁面中該類型的所有標記都有效。例如,可以使用p選擇器定義HTML頁面中所有段落的樣式,示例代碼如下:
p{font-size:12px;color:#666;font-family:"微軟雅黑";}
上述CS樣式代碼用于設置HTML頁面中所有的段落文本—字體大小為12px、顏色為#666、字體為微軟雅黑。
標記選擇器最大的優(yōu)點是能快速為頁面中同類型的標記統(tǒng)一樣式,同時這也是它的缺點,不能設計差異化樣式。
2. 類選擇器類
選擇器使用“.”(英文點號)進行標識,后面緊跟類名,其基本語法格式如下:
.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
上述語法中,類名即為HTML標記的class屬性值,大多數(shù)HML標記都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為標記對象定義單獨或相同的樣式。
3. id選擇器
id選擇器使用“#”進行標識,后面緊跟id名,其基本語法格式如下:
#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
上述語法中,id名即為HTML標記的id屬性中的值,大多數(shù)HTM標記都可以定義id屬性,標記的id值是唯一的,只能對應于文檔中某一個具體的標記。
4. 通配符選擇器
通配符選擇器用“*”號表示,它是所有選擇器中作用范圍最廣的,能匹配頁面中所有的標記。其基本語法格式如下:
*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}
例如,下面的代碼使用通配符選擇器定義CSS樣式,清除所有HTML標記的默認邊距。
*{ margin: 0; /*定義外邊距*/ padding: 0; /*定義內(nèi)邊距*/ }
在實際網(wǎng)頁開發(fā)中不建議使用通配符選擇器,因為它設置的樣式對所有的HTML標生效,不管標記是否需要該樣式,這樣反而降低了代碼的執(zhí)行速度。
5. 標簽指定式選擇器
標簽指定式選擇器又稱交集選擇器,由兩個選擇器構(gòu)成,其中第一個為標記選擇器,第二個為class選擇器或id選擇器,兩個選擇器之間不能有空格,如h3.specail或p#one。
6.后代選擇器
后代選擇器用來選擇某標記的后代標記,其寫法就是把外層標記寫在前面,內(nèi)層標記寫在后面,中間用空格分隔。當標記發(fā)生嵌套時,內(nèi)層標記就成為外層標記的后代。例如,當標記內(nèi)嵌套標記時,就可以使用后代選擇器對其中的標記進行控制。
7.并集選擇器
并集選擇器是各個選擇器通過逗號連接而成的,任何形式的選擇器(包括標記選擇器、類選擇器以及id選擇器等)都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同或部分相同,就可以利用并集選擇器為它們定義相同的CSS樣式。
例如在頁面中有兩個標題和三個段落,它們的字號和顏色相同。同時其中一個標題和兩個段落文本有下畫線效果,這時就可以使用并集選擇器定義CSS樣式。
CSS3是CSS的最新版本,在CSS3中增加了許多新的選擇器。運用這些選擇器可以簡網(wǎng)頁代碼的書寫,讓穩(wěn)當?shù)慕Y(jié)構(gòu)更加簡單。CSS3新增的選擇器主要分為屬性選擇器、關(guān)系選擇器、結(jié)構(gòu)化偽類選擇器、偽元素選擇器4類,具體介紹如下。
1、 屬性選擇器
屬性選擇器可以根據(jù)網(wǎng)頁標記的屬性及屬性值來選擇標記。屬性選擇器一般是一個記后緊跟中括號“[]”,中括號內(nèi)部是屬性或者屬性表達式,如下所示:
CSS3中常見的屬性選擇器主要包括E[att^=value]、E[att$=value]和E[att*=value]這三種性選擇器,具體如下所示:
(1)E[att^=value]
例如: div[id^=section]
說明:表示匹配包含id屬性,且id屬性值是以“section”字符串開頭的div標記。
(2)E[att$=value]
例如:
div[id$=section]
說明:表示匹配包含id屬性,且id屬性值是以“section”字符串結(jié)尾的div標記
(3)E[att*=value]
例如:
div[id*=section]
說明:表示匹配包含id屬性,且id屬性值包含“section”字符串開頭的div標記。
2、關(guān)系選擇器
CSS3中的關(guān)系選擇器主要包括子代選擇器和兄弟選擇器,其中子代選擇器由符號連接,兄弟選擇器由符號“+”和“~”連接,具體如下所示。
(1)關(guān)系選擇器
例如:
h1>strong
說明:表示選擇嵌套在h1標記的子標記strong。
(2)臨近兄弟選擇器
例如:
h2+p
說明:表示選擇h2標記后緊鄰的第一個兄弟標記p。
(3)普通兄弟選擇器
例如:
p~h2
說明:表示選擇p標記所有的h2兄弟標記。
3、結(jié)構(gòu)化偽類選擇器
結(jié)構(gòu)化偽類選擇器可以減少文檔內(nèi)class屬性和id屬性的定義,使文檔變得更加簡潔。下面列舉了常用的結(jié)構(gòu)化偽類選擇器。
:root
用于匹配文檔根標記,使用“:root選擇器”定義的樣式,對所有頁面標記都生效。
:not
例如:
body*:not(h2)
用于排除body結(jié)構(gòu)中的子結(jié)構(gòu)標記h2。
:only-child
例如:
li:only-child
用于匹配屬于某父標記的唯一子標記(li),也就是說某個父標記僅有一個子標記(li)。
:first=child
用于選擇父元素第一個子標記。
:last-child
用于選擇父元素最后一個子標記。
:nth-child(n)
例如:
p:nth-child(2)
表示用于選擇父元素第二個p標記。
:nth-last-child(n)
例如:
p:nth-last-child(2)
用于表示父元素倒數(shù)第二個p標記。
:nth-of-type(n)
例如:
h2:nth-of-type(odd)
表示用于選擇所有h2標記中位于奇數(shù)行數(shù)的標記。
:nth-last-of-type(2)
例如:
p:nth-last-of-type(2)
表示用于選擇倒數(shù)第二個p標記。
:empty
用于選擇沒有子標記或者文本內(nèi)容為空的所有標記。
4、偽元素選擇器
偽元素選擇器一般是一個標記后面緊跟英文冒號“:”,英文冒號后是偽元素名,如下所示。
需要注意的是,標記與偽元素名之間不要有空格,偽元素選擇器常見有:before選擇器和:after選擇器。
:before
例如:
p:before
表示:表示在p標記的內(nèi)容前面插入內(nèi)容。
:after
例如:
p:after
表示: 表示在p標記的內(nèi)容后面插入內(nèi)容。
需要注意的是,如果想要在文本后面添加是圖片,只需更改content屬性后的內(nèi)容即可。其基本語法格式如下
p: after{content: url(); }
猜你喜歡:
書寫CSS需要遵循哪些規(guī)則?它的結(jié)構(gòu)有什么特點?