一、什么是選擇器?
每一條css樣式聲明(定義)由兩部分組成,形式如下:
選擇器{
樣式
}
在{}之前的部分是“選擇器”,“選擇器”是{}中的作用對(duì)象,例如:
p{
color:blue;
}
表示字體為紅色的樣式作用于p選擇器。
二、選擇器的主要分類:
(1)基礎(chǔ)選擇器:標(biāo)簽選擇器、類選擇器、id選擇器、通配符選 擇器。
(2)組合選擇器:標(biāo)簽指定式選擇器、后代選擇器。
(3)屬性選擇器
(4)偽類選擇器
基礎(chǔ)選擇器:
標(biāo)簽選擇器也叫元素選擇器。其實(shí)就是 html 代碼中的標(biāo)簽,比如 < html >、< body >、< h1 >、< p >、< img >。
語(yǔ)法格式為:
html{
屬性1:屬性值1;
屬性2:屬性值2;
...
}
...
類選擇器:
類選擇器,是對(duì) HTML 標(biāo)簽中 class 屬性進(jìn)行選擇。CSS 類選擇器的選擇符是 “.”。
類選擇器命名規(guī)范:不能是純數(shù)字,不能是標(biāo)簽名,不建議使用漢字。一般是點(diǎn)+對(duì)應(yīng)樣式描述。例如:.header-nav。
基本語(yǔ)法格式如下:
.header{
屬性1:屬性值1;
屬性2:屬性值2:;
...
}
id選擇器:
id選擇器是對(duì)HTML標(biāo)簽中id屬性進(jìn)行選擇,id選擇器的選擇符是“#”, 任何元素都可以使用 id 屬性設(shè)置唯一的 id 名稱。這是選擇單個(gè)元素的最有效的方式。
特別需要注意的是 id 選擇器具有唯一性,也就是說(shuō)同一個(gè) HTML 頁(yè)面不能有相同的 id 名稱(使用多個(gè)相同的 id 選擇器,瀏覽器不會(huì)報(bào)錯(cuò)但是不符合 W3C 標(biāo)準(zhǔn))。
可以這樣理解:一個(gè)人的名字(class 類名)可以有很多重名的,但是身份證號(hào)(id 名稱)只能有一個(gè)唯一的,不能重復(fù)的。
基本語(yǔ)法格式如下:
#id{
屬性1:屬性值1;
屬性2:屬性值2:
...
}
通配符選擇器:
通配符選擇器用“*”號(hào)表示,他是所有選擇器中作用范圍最廣的,能匹配頁(yè)面中所有的元素。其基本語(yǔ)法格式如下:
*{
屬性1:屬性值1;
屬性2:屬性值2;
}
標(biāo)簽指定式選擇器:
標(biāo)簽指定式選擇器又稱交集選擇器,由兩個(gè)選擇器構(gòu)成,其中一個(gè)必須是標(biāo)簽選擇器,第二個(gè)為class選擇器或id選擇器,兩個(gè)選擇器之間不能有空格。
例如:
CSS選擇器
天天向上
我愛(ài)學(xué)習(xí)
后代選擇器:
后代選擇器又叫包含選擇器,用來(lái)選擇元素或者元素的后代,其寫(xiě)法就是把外層標(biāo)記寫(xiě)在前面,內(nèi)層標(biāo)記寫(xiě)在后面,中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí),內(nèi)層標(biāo)記就成了外層標(biāo)記的后代。
例如:
好好學(xué)習(xí)
好好學(xué)習(xí)
好好學(xué)習(xí)
好好學(xué)習(xí)
并集選擇器:
并集選擇器就是通過(guò)各個(gè)選擇器用“,”連接而成的,任何形式的選擇器(包括標(biāo)簽選擇器,類選擇器,id選擇器等)都可以作為并集選擇器的一部分,如果某些選擇器定義的樣式完全相同,或部分相同,就可以利用并集選擇器為它們定義相同的 CSS 樣式。簡(jiǎn)單記憶為:和的意思。
屬性選擇器:
屬性選擇器是根據(jù)元素的屬性或者屬性值來(lái)選擇元素,常用的集中屬性選擇器:
偽類選擇器:
CSS 偽類用于向某些選擇器添加特殊的效果。
幾個(gè)常用的偽類:
(1):link 應(yīng)用于未被訪問(wèn)過(guò)的鏈接。IE6 不兼容,解決此問(wèn)題,直接使用 a 標(biāo)簽。
(2):hover 應(yīng)用于有鼠標(biāo)指針懸停于其上的元素。在 IE6 只能應(yīng)用于 a 連接,IE7+ 所有元素都兼容。
(3):active 應(yīng)用于被激活的元素,如被點(diǎn)擊的鏈接、被按下的按鈕等。
(4):visited 應(yīng)用于已經(jīng)被訪問(wèn)過(guò)的鏈接。