class

一州藕,CSS3 選擇器分類

二适揉,選擇器語(yǔ)法

1梅桩,基本選擇器語(yǔ)法

選擇器類型功能描述

*?通配選擇器?選擇文檔中所以HTML元素

E?元素選擇器選擇指定類型的HTML元素

#id?ID選擇器選擇指定ID屬性值為“id”的任意類型元素

.class?類選擇器選擇指定class屬性值為“class”的任意類型的任意多個(gè)元素

selector1,selectorN?群組選擇器將每一個(gè)選擇器匹配的元素集合并


2讯私,層次選擇器語(yǔ)法

選擇器類型功能描述

E ?F后代選擇器(包含選擇器)選擇匹配的F元素缀皱,且匹配的F元素被包含在匹配的E元素內(nèi)

E>F子選擇器選擇匹配的F元素受裹,且匹配的F元素所匹配的E元素的子元素

E+F相鄰兄弟選擇器選擇匹配的F元素碌补,且匹配的F元素緊位于匹配的E元素的后面

E~F通用選擇器選擇匹配的F元素,且位于匹配的E元素后的所有匹配的F元素


3棉饶,動(dòng)態(tài)偽類選擇器語(yǔ)法

選擇器類型功能描述

E:link鏈接偽類選擇器 ?選擇匹配的E元素厦章,而且匹配元素被定義了超鏈接并未被訪問(wèn)過(guò)。常用于鏈接描點(diǎn)上

E:visited ?鏈接偽類選擇器選擇匹配的E元素照藻,而且匹配元素被定義了超鏈接并已被訪問(wèn)過(guò)袜啃。常用于鏈接描點(diǎn)上

E:active用戶行為選擇器選擇匹配的E元素,且匹配元素被激活幸缕。常用于鏈接描點(diǎn)和按鈕上

E:hover用戶行為選擇器選擇匹配的E元素群发,且用戶鼠標(biāo)停留在元素E上。IE6及以下瀏覽器僅支持a:hover

E:focus用戶行為選擇器選擇匹配的E元素发乔,而且匹配元素獲取焦點(diǎn)


4熟妓,目標(biāo)偽類選擇器

選擇器功能描述

E:target選擇匹配E的所有元素,且匹配元素被相關(guān)URL指向


5栏尚,UI元素狀態(tài)偽類選擇器語(yǔ)法

選擇器類型功能描述

E:checked選中狀態(tài)偽類選擇器匹配選中的復(fù)選按鈕或者單選按鈕表單元素

E:enabled啟用狀態(tài)偽類選擇器匹配所有啟用的表單元素

E:disabled不可用狀態(tài)偽類選擇器匹配所有禁用的表單元素

?6起愈,結(jié)構(gòu)偽類選擇器使用語(yǔ)法

選擇器功能描述

E:fisrt-child作為父元素的第一個(gè)子元素的元素E。與E:nth-child(1)等同

E:last-child作為父元素的最后一個(gè)子元素的元素E译仗。與E:nth-last-child(1)等同

E:root選擇匹配元素E所在文檔的根元素抬虽。在HTML文檔中,根元素始終是html纵菌,此時(shí)該選擇器與html類型選擇器匹配的內(nèi)容相同

E F:nth-child(n)選擇父元素E的第n個(gè)子元素F阐污。其中n可以是整數(shù)(1,2咱圆,3)疤剑、關(guān)鍵字(even,odd)闷堡、可以是公式(2n+1),而且n值起始值為1,而不是0.

E F:nth-last-child(n)選擇父元素E的倒數(shù)第n個(gè)子元素F疑故。此選擇器與E:nth-child(n)選擇器計(jì)算順序剛好相反杠览,但使用方法都是一樣的,其中:nth-last-child(1)始終匹配最后一個(gè)元素纵势,與last-child等同

E:nth-of-type(n)選擇父元素內(nèi)具有指定類型的第n個(gè)E元素

E:nth-last-of-type(n)選擇父元素內(nèi)具有指定類型的倒數(shù)第n個(gè)E元素

E:first-of-type選擇父元素內(nèi)具有指定類型的第一個(gè)E元素踱阿,與E:nth-of-type(1)等同

E:last-of-tye選擇父元素內(nèi)具有指定類型的最后一個(gè)E元素管钳,與E:nth-last-of-type(1)等同

E:only-child選擇父元素只包含一個(gè)子元素,且該子元素匹配E元素

E:only-of-type選擇父元素只包含一個(gè)同類型子元素软舌,且該子元素匹配E元素

E:empty選擇沒(méi)有子元素的元素才漆,而且該元素也不包含任何文本節(jié)點(diǎn)

注:(1),“ul>li:nth-child(3)”表達(dá)的并不是一定選擇列表ul元素中的第3個(gè)子元素li佛点,僅有列表ul中第3個(gè)li元素前不存在其他的元素醇滥,命題才有意義,否則不會(huì)改變列表第3個(gè)li元素的樣式超营。

(2)鸳玩,:nth-child(n) ?中參數(shù)只能是n,不可以用其他字母代替演闭。

(3)不跟,:nth-child(odd) 選擇的是奇數(shù)項(xiàng),而使用:nth-last-child(odd) 選擇的卻是偶數(shù)項(xiàng)

7米碰,否定偽類選擇器

選擇器功能描述

E:not(F)匹配所有除元素F外的E元素

8窝革,屬性選擇器語(yǔ)法

選擇器功能描述

[attribute]用于選取帶有指定屬性的元素。

[attribute=value]用于選取帶有指定屬性和值的元素吕座。

[attribute~=value]用于選取屬性值中包含指定詞匯的元素虐译。

[attribute|=value]用于選取帶有以指定值開(kāi)頭的屬性值的元素,該值必須是整個(gè)單詞米诉。

[attribute^=value]匹配屬性值以指定值開(kāi)頭的每個(gè)元素菱蔬。

[attribute$=value]匹配屬性值以指定值結(jié)尾的每個(gè)元素。

[attribute*=value]匹配屬性值中包含指定值的每個(gè)元素史侣。


CSS 選擇符:

1)????? id選擇器(# myid)

2)????? 類選擇器(.myclassname)

3)????? 標(biāo)簽選擇器(div, h1, p)

4)????? 相鄰選擇器(h1 + p)

5)????? 子選擇器(ul > li)

6)????? 后代選擇器(li a)

7)????? 通配符選擇器( * )

8)????? 屬性選擇器(a[rel = "external"])

9)????? 偽類選擇器(a: hover, li:nth-child)

可繼承的樣式:

1)????? font-size

2)????? font-family

3)????? color

4)????? text-indent

不可繼承的樣式:

1)????? border

2)????? padding

3)????? margin

4)????? width

5)????? height

優(yōu)先級(jí)算法:

1)????? 優(yōu)先級(jí)就近原則拴泌,同權(quán)重情況下樣式定義最近者為準(zhǔn);

2)????? 載入樣式以最后載入的定位為準(zhǔn);

3)????? 3.!important > ?id > class > tag ?

4)????? important 比 內(nèi)聯(lián)優(yōu)先級(jí)高,但內(nèi)聯(lián)比 id 要高

CSS3新增偽類舉例:

1)????? p:first-of-type ?選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素惊橱。

2)????? p:last-of-type ? 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素蚪腐。

3)????? p:only-of-type ?選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。

4)????? p:only-child ? ? 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素税朴。

5)????? p:nth-child(2) ?選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素回季。

6)????? :enabled :disabled 控制表單控件的禁用狀態(tài)。

7)????? :checked ? ? ? ? 單選框或復(fù)選框被選中正林。

CSS3有哪些新特性泡一?

1)??? CSS3實(shí)現(xiàn)圓角(border-radius),陰影(box-shadow)觅廓,

2)??? 對(duì)文字加特效(text-shadow鼻忠、),線性漸變(gradient)杈绸,旋轉(zhuǎn)(transform)

3)??? transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉(zhuǎn),縮放,定位,傾斜

4)??? 增加了更多的CSS選擇器 ?多背景 rgba?

5)??? 在CSS3中唯一引入的偽元素是 ::selection.

6)??? 媒體查詢帖蔓,多欄布局

7)??? border-image

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末矮瘟,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子塑娇,更是在濱河造成了極大的恐慌澈侠,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件埋酬,死亡現(xiàn)場(chǎng)離奇詭異哨啃,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)奇瘦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門棘催,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人耳标,你說(shuō)我怎么就攤上這事醇坝。” “怎么了次坡?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,704評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵呼猪,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我砸琅,道長(zhǎng)宋距,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,702評(píng)論 1 294
  • 正文 為了忘掉前任症脂,我火速辦了婚禮谚赎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘诱篷。我一直安慰自己壶唤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,716評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布棕所。 她就那樣靜靜地躺著闸盔,像睡著了一般。 火紅的嫁衣襯著肌膚如雪琳省。 梳的紋絲不亂的頭發(fā)上迎吵,一...
    開(kāi)封第一講書(shū)人閱讀 51,573評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音针贬,去河邊找鬼击费。 笑死,一個(gè)胖子當(dāng)著我的面吹牛桦他,可吹牛的內(nèi)容都是我干的蔫巩。 我是一名探鬼主播,決...
    沈念sama閱讀 40,314評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼批幌!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起嗓节,我...
    開(kāi)封第一講書(shū)人閱讀 39,230評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤荧缘,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后拦宣,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體截粗,經(jīng)...
    沈念sama閱讀 45,680評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,873評(píng)論 3 336
  • 正文 我和宋清朗相戀三年鸵隧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绸罗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,991評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡豆瘫,死狀恐怖珊蟀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情外驱,我是刑警寧澤育灸,帶...
    沈念sama閱讀 35,706評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站昵宇,受9級(jí)特大地震影響磅崭,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜瓦哎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,329評(píng)論 3 330
  • 文/蒙蒙 一砸喻、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蒋譬,春花似錦割岛、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,910評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至也切,卻和暖如春扑媚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背雷恃。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,038評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工疆股, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人倒槐。 一個(gè)月前我還...
    沈念sama閱讀 48,158評(píng)論 3 370
  • 正文 我出身青樓旬痹,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子两残,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,941評(píng)論 2 355