CSS選擇器

1 class 和 id 的使用場(chǎng)景?

class(類選擇器)可以有多個(gè)相同的class類名,
id(id選擇器)必須是唯一的,只有一個(gè)

class樣式可使用在多個(gè)標(biāo)簽上言蛇,用于多個(gè)標(biāo)簽樣式相同或相似。
id用于指定唯一一個(gè)標(biāo)簽的樣式,多用于頁(yè)面分塊的塊級(jí)標(biāo)簽上伊者。
<div id="header">
<div id="footer">

2 CSS選擇器常見的有幾種?

常用的有7種
1屬性選擇器
2偽類選擇器
3偽元素選擇器
4通配符選擇器
5ID選擇器
6類選擇器
7標(biāo)簽選擇器

3 選擇器的優(yōu)先級(jí)是怎樣的?對(duì)于復(fù)雜場(chǎng)景如何計(jì)算優(yōu)先級(jí)?

3.1 優(yōu)先級(jí)(高——》低)
1 屬性后使用间护!important亦渗,會(huì)覆蓋頁(yè)面的任意位置定義的元素樣式。
2 作為style屬性寫在元素上的內(nèi)聯(lián)樣式<h1 style="xxx">
3 id選擇器
4 類選擇器
5 偽類選擇器
6 屬性選擇器
7 標(biāo)簽選擇器
8 通配符選擇器
9 瀏覽器自定義

3.2 復(fù)雜場(chǎng)景怎么計(jì)算的優(yōu)先級(jí)汁尺?
(1)默認(rèn)將選擇器劃分成a b c d 四等級(jí)
a
行內(nèi)樣式 <div style="xxx">
b
id選擇器
c
類選擇器法精、 屬性選擇器、 偽類選擇器
d
標(biāo)簽選擇器均函、 偽元素選擇器

(2)計(jì)算各等級(jí)的總個(gè)數(shù),
(3)從a開始作比較菱涤。如果a的個(gè)數(shù)最大苞也,則a的權(quán)重高;
如果a中的個(gè)數(shù)相同粘秆,再比較b,以此類推如迟。

4 a:link, a:hover, a:active, a:visited 的順序是怎樣的? 為什么?

正確順序:
a:link(鼠標(biāo)未點(diǎn)擊狀態(tài))
a:visited(點(diǎn)擊后狀態(tài))
a:hover(懸停狀態(tài))
a:active(鼠標(biāo)點(diǎn)擊并未釋放的狀態(tài))
原因:
四個(gè)偽類選擇器的優(yōu)先級(jí)相同殷勘,考慮到樣式覆蓋此再,后面樣式會(huì)覆蓋前面的樣式。

5 以下選擇器分別是什么意思?

header{
ID為header 的元素
}
.header{
class為header的元素
}
.header .logo{
class為 header后代中的class為logo的元素
}
.header.mobile{
class是header又是mobile 的元素
}
.header p, .header h3{
class為header的后代標(biāo)簽p的元素和 class為header的后代標(biāo)簽h3的元素
}
header .nav>li{
ID為header的后代class為nav的直接子元素li的元素
}
header a:hover{
ID為header的后代中a標(biāo)簽的元素在鼠標(biāo)懸停的樣式
}
header .logo~p{
ID為header的后代中所有包含class為logo的元素之后所有同級(jí)p元素
}
header input[type="text"]{
ID為header的后代的input標(biāo)簽中type="text" 屬性的元素
}

6 列出你知道的偽類選擇器

E:link 匹配所有未點(diǎn)擊的鏈接
E:hover 鼠標(biāo)懸停在E元素上
E:active 鼠標(biāo)已經(jīng)點(diǎn)擊玲销,還沒有釋放元素
E:visited 鼠標(biāo)已經(jīng)點(diǎn)擊過
E:focus 獲得焦點(diǎn)的元素
E:selection 當(dāng)前元素選中的元素
E:enabled 沒有禁用的元素
E:disabled 已經(jīng)禁用的元素
E:checked 被選中的元素
E:lang(c) lang屬性等于c的元素
E:first-child E的父元素的第一個(gè)子元素
E:last-child E的父元素的最后一個(gè)子元素

E:nth-child(n) E的父元素的第n個(gè)子元素
E:nth-last-child(n) E的父元素的倒數(shù)第n個(gè)子元素

E:first-of-type(n) 匹配父元素下的使用同種標(biāo)簽的第n個(gè)子元素
E:nth-of-type(n) 匹配使用同種標(biāo)簽的元素

補(bǔ)充:n的取值
1,2,3,4.......
奇數(shù): odd, 2n+1
偶數(shù): even 2n
可以應(yīng)用于表格中的奇數(shù)行和偶數(shù)行的背景顏色

7 div:first-child输拇、div:first-of-type、div :first-child和div :first-of-type的作用和區(qū)別 (注意空格的作用)

div:first-child
匹配div元素贤斜,并且為父元素下的第一個(gè)子元素

div:first-of-type
匹配父元素下的第一個(gè)div子元素策吠。不一定是父元素下的第一個(gè)子元素

div :first-child
匹配div元素的所有后代的第一個(gè)子元素。(所有后代是嵌套或子元素等所有)

div :first-of-type
匹配div元素下所有后代同種標(biāo)簽中的第一個(gè)元素

8 運(yùn)行如下代碼瘩绒,解析下輸出樣式的原因猴抹。

圖所示:


Paste_Image.png

如圖樣式:
1 aa為字體顏色為紅色
解析樣式:
因?yàn)轭悶閕tem1包含aa的元素,是.ct父類下的第一個(gè)子元素锁荔,所以對(duì)應(yīng)輸出aa字體為紅色
2 aa蟀给、bb背景為藍(lán)色
解析樣式:
包含aa和bb,類為item1是.ct下的第一個(gè)p元素和第一個(gè)h3元素阳堕,所以aa bb背景為藍(lán)色

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末跋理,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子嘱丢,更是在濱河造成了極大的恐慌薪介,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件越驻,死亡現(xiàn)場(chǎng)離奇詭異汁政,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)缀旁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門记劈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人并巍,你說我怎么就攤上這事目木。” “怎么了懊渡?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵刽射,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我剃执,道長(zhǎng)誓禁,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任肾档,我火速辦了婚禮摹恰,結(jié)果婚禮上辫继,老公的妹妹穿的比我還像新娘。我一直安慰自己俗慈,他們只是感情好姑宽,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著闺阱,像睡著了一般炮车。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上馏颂,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天示血,我揣著相機(jī)與錄音,去河邊找鬼救拉。 笑死难审,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的亿絮。 我是一名探鬼主播告喊,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼派昧!你這毒婦竟也來了黔姜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤蒂萎,失蹤者是張志新(化名)和其女友劉穎秆吵,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體五慈,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡纳寂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了泻拦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片毙芜。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖争拐,靈堂內(nèi)的尸體忽然破棺而出腋粥,到底是詐尸還是另有隱情,我是刑警寧澤架曹,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布隘冲,位于F島的核電站,受9級(jí)特大地震影響绑雄,放射性物質(zhì)發(fā)生泄漏展辞。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一绳慎、第九天 我趴在偏房一處隱蔽的房頂上張望纵竖。 院中可真熱鬧,春花似錦杏愤、人聲如沸靡砌。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)通殃。三九已至,卻和暖如春厕宗,著一層夾襖步出監(jiān)牢的瞬間画舌,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工已慢, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留曲聂,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓佑惠,卻偏偏與公主長(zhǎng)得像朋腋,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子膜楷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 1.class 和 id 的使用場(chǎng)景? class:類選擇器旭咽,一個(gè)標(biāo)簽可以有多個(gè)類且同一個(gè)類可以用到不同的標(biāo)簽上,...
    饑人谷_兔子君閱讀 1,183評(píng)論 0 0
  • class 和 id 的使用場(chǎng)景赌厅? class定位到頁(yè)面上的某一類元素穷绵。id定位到頁(yè)面上的某一元素。id是唯一的特愿,...
    小囧兔閱讀 440評(píng)論 0 0
  • 1仲墨,class 和 id 的使用場(chǎng)景? 1.class是類選擇器,用.class定義洽议,定位到頁(yè)面中有相同特征的一類...
    饑人谷_思銘閱讀 368評(píng)論 0 0
  • class和id的使用場(chǎng)景 class指定標(biāo)簽的類名宗收,屬性值可出現(xiàn)在多個(gè)標(biāo)簽中。id指定標(biāo)簽的唯一標(biāo)識(shí)亚兄,為某一元素...
    饑人谷_saybye閱讀 449評(píng)論 0 0
  • 一混稽,class 和 id 的使用場(chǎng)景? id選擇器,匹配特定id的元素审胚。class是類選擇器匈勋,匹配class包含(...
    DeeJay_Y閱讀 357評(píng)論 0 0