前端基礎(chǔ)(CSS 選擇器)八

背景


CSS 是開放網(wǎng)絡(luò) open web 的核心語言之一,由 W3C 規(guī)范 進(jìn)行標(biāo)準(zhǔn)化采郎。CSS 分為不同等級(jí)千所,CSS1 現(xiàn)已廢棄狂魔, CSS2.1 是推薦標(biāo)準(zhǔn), CSS3 分成多個(gè)小模塊淫痰,正在標(biāo)準(zhǔn)化中最楷。

CSS定義


層疊樣式表 (Cascading Style Sheets),炒恚縮寫為 CSS籽孙, 是一門 樣式表 (stylesheet) 語言,用來描述 HTML火俄、XML(包括各種 XML 語言如 SVG犯建、XHTML)文檔的呈現(xiàn)。CSS 描述了在屏幕瓜客、電子紙适瓦、音頻或其它媒體上如何渲染元素

問答


1. CSS選擇器常見的有幾種?

常見的選擇器有基礎(chǔ)選擇器谱仪、基于關(guān)系的組合選擇器玻熙、屬性選擇器偽類選擇器疯攒、偽元素嗦随,下面列舉部分說明。

  • 基礎(chǔ)選擇器
基礎(chǔ)選擇器 含義 實(shí)例
p 標(biāo)簽選擇器敬尺,匹配p標(biāo)簽元素 p{color: red;}
.boy 類選擇器枚尼,匹配類名為boy的元素 .classname{font-size: 12px;}
#header Id選擇器,匹配Id為header的元素 #idname{margin: 0 auto;}
* 通配符選擇器砂吞,匹配所有元素 *{margin: 0;padding: 0;}
  • 組合選擇器
組合選擇器 含義 實(shí)例
A>B 子代選擇器署恍,匹配父元素為A的所有B元素 div>.boy{font-family: "黑體";}
A B 后代選擇器,匹配A元素下所有B元素 div p{font-weight: 700;}
A,B 多元素選擇器呜舒,匹配所有A和B元素 .header,.content{border: 1px solid pink;}
A+B 所有緊跟著A元素的B元素 div+p{background-color: #ccc;}
A~B 所有兄長元素為A元素的B元素 span~a{text-decoration: none;}
  • 屬性選擇器
屬性選擇器 含義 實(shí)例
E[A] 所有屬性有A的E元素 input[target]
E[A=b] 所有屬性A的屬性值為b的E元素 input[type=text]
E[A~=b] 所有屬性A的屬性值包含了單詞b的E元素 p[title=car]
E[A|=b] 所有屬性A的首個(gè)屬性值為b(包括屬性值以b-開頭锭汛,即b-c亦可)的E元素 p[lang|=en]
  • 偽類選擇器
偽類選擇器 含義 實(shí)例
E:link 匹配所有未被點(diǎn)擊的鏈接 a:link{color: black;}
E:visited 匹配所有已被點(diǎn)擊的鏈接 a:visited{color: blue;}
E:hover 匹配鼠標(biāo)懸停其上的E元素 span:hover{background-color: pink;}
E:active 匹配鼠標(biāo)已經(jīng)按下、還沒有釋放的E元素 a:active{color: yellow;}
E:focus 匹配獲得當(dāng)前焦點(diǎn)的E元素 input:focus{background-color: gray;}
E:lang(it) 匹配屬性lang首個(gè)屬性值為it(包括屬性值以it-開頭袭蝗,即it-us亦可)的E元素 p:lang(it){text-align: center;}
  • 偽元素
偽元素 含義 實(shí)例
E::after 在E元素后面插入生成內(nèi)容 .txt::after{content: "";width:0;height:0;position:absolute;border-bottom:10px solid #ccc;}
E::before 在E元素前面插入生成內(nèi)容 .txt::before{content: "";width:0;height:0;position:absolute;border-bottom:10px solid #ccc;}
E::first-letter 匹配E元素第一個(gè)字母 p::first-letter{color:pink;}
E::first-line 匹配E元素第一行內(nèi)容 p::first-line{color:pink;}

2. 選擇器的優(yōu)先級(jí)是怎樣的?

各種類型選擇器唤殴、行內(nèi)樣式的權(quán)重可以參照下面的趣味圖:

選擇器權(quán)重

選擇器的優(yōu)先級(jí)有3個(gè)原則:

  • 選擇器越精確優(yōu)先級(jí)越高(權(quán)重越高優(yōu)先級(jí)越高)
  • 下面比上面優(yōu)先級(jí)高
  • !important優(yōu)先級(jí)最高

3. class 和 id 的使用場景?

選擇器 適用范圍
類選擇器 一般用于小區(qū)塊到腥、公共樣式
Id選擇器 一般用于宏觀布局和頁面結(jié)構(gòu)的樣式朵逝、DOM定位節(jié)點(diǎn)

4. 使用CSS選擇器時(shí)為什么要?jiǎng)澏ㄟm當(dāng)?shù)拿臻g?

語義化的命名可以使機(jī)器乡范、開發(fā)者配名、用戶更好的理解代碼或頁面啤咽,提高了效率就創(chuàng)造了價(jià)值。

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

選擇器 含義
#header Id名為header的元素
.header 類名為header的元素
.header .logo 類名為header的后代中類名為logo的元素
.header.mobile 類名為header且為mobile的元素
.header p, .header h3 類名為header的后代中所有的p渠脉、h3標(biāo)簽元素
#header .nav>li Id名為header的后代中類名為nav的子元素中所有的li標(biāo)簽元素
#header a:hover Id名為header的所有a標(biāo)簽元素后代再匹配鼠標(biāo)懸停在該a標(biāo)簽上

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

見題1中的偽類選擇器宇整,這里再補(bǔ)充一些:

偽類選擇器 含義
E:first-child 長子中所有的E元素
E:nth-child(n) 兄弟中排第n的所有E元素
E:nth-last-child(n) 和上面的差不多,只不過n是從最后一個(gè)兄弟數(shù)起
E:nth-of-type(n) 同類型元素中排名第n的所有E元素
E:first-of-type 同類型元素中的所有為E元素的長子
E:last-of-type 同類型元素中的所有為E元素最小的兒子
E:empty 沒有后代的所有E元素
E:target 已觸發(fā)錨鏈接的目標(biāo)E元素
E:checked 已被選的所有E元素
E:enabled 在啟用的所有E元素
E:disabled 在禁用的所有E元素

7. :first-child和:first-of-type的作用和區(qū)別

偽類選擇器 含義 區(qū)別
E:first-child 選擇長子中所有的E元素 所有兄弟中的長子且是E元素
E:first-of-type 選擇同類型元素中的所有為E元素的長子 只是同類型元素的兄弟中為E元素的長子

圖解如下:

8. 運(yùn)行如下代碼芋膘,解析下輸出樣式的原因鳞青。

.item1:first-child——所有類名為item的長子只有<p class="item1">aa</p>。
.item1:first-of-type——所有同類型為p類型/標(biāo)簽元素中類名為item1的長子只有<p class="item1">aa</p>为朋,所有同類型為h3類型/標(biāo)簽元素中類名為item1的長子只有<h3 class="item1">bb</h3>臂拓。
故aa字體紅色、背景藍(lán)色习寸,bb背景藍(lán)色胶惰。

9. text-align: center的作用是什么,作用在什么元素上霞溪?能讓什么元素水平居中

text-align:center規(guī)定行內(nèi)內(nèi)容相對父元素居中對齊孵滞,測試text-align: center在塊級(jí)元素、行內(nèi)元素威鹿、行內(nèi)塊元素的效果如下:

text-align:center測試

顯然剃斧,所謂行內(nèi)內(nèi)容包括行內(nèi)元素行內(nèi)塊元素行內(nèi)文本忽你。

10. 如果遇到一個(gè)屬性想知道兼容性幼东,在哪查看?

點(diǎn)擊查看兼容性,如下:

參考



本文章著作權(quán)歸饑人谷_九霄和饑人谷所有科雳,轉(zhuǎn)載須說明來源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末根蟹,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子糟秘,更是在濱河造成了極大的恐慌简逮,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件尿赚,死亡現(xiàn)場離奇詭異散庶,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)凌净,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門悲龟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冰寻,你說我怎么就攤上這事须教。” “怎么了斩芭?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵轻腺,是天一觀的道長乐疆。 經(jīng)常有香客問我,道長贬养,這世上最難降的妖魔是什么挤土? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮煤蚌,結(jié)果婚禮上耕挨,老公的妹妹穿的比我還像新娘。我一直安慰自己尉桩,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布贪庙。 她就那樣靜靜地躺著蜘犁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪止邮。 梳的紋絲不亂的頭發(fā)上这橙,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機(jī)與錄音导披,去河邊找鬼屈扎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛撩匕,可吹牛的內(nèi)容都是我干的鹰晨。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼止毕,長吁一口氣:“原來是場噩夢啊……” “哼模蜡!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起扁凛,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤忍疾,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后谨朝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卤妒,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年字币,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了则披。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡纬朝,死狀恐怖收叶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情共苛,我是刑警寧澤判没,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布蜓萄,位于F島的核電站,受9級(jí)特大地震影響澄峰,放射性物質(zhì)發(fā)生泄漏嫉沽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一俏竞、第九天 我趴在偏房一處隱蔽的房頂上張望绸硕。 院中可真熱鬧,春花似錦魂毁、人聲如沸玻佩。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咬崔。三九已至,卻和暖如春烦秩,著一層夾襖步出監(jiān)牢的瞬間垮斯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工只祠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留兜蠕,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓抛寝,卻偏偏與公主長得像熊杨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子墩剖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案猴凹? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評論 1 92
  • 一、CSS選擇器常見的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素岭皂,用一個(gè)*表示 元素選擇器~選...
    dengpan閱讀 966評論 0 3
  • 其實(shí)平時(shí)用得多的選擇器無非也就是那么幾個(gè)郊霎,時(shí)間久了,許多不常用的選擇器就慢慢忘記了爷绘。為了不讓自己忘記這些選擇器书劝,今...
    盛夏晚清風(fēng)閱讀 1,842評論 0 5
  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器。換句話說土至,文檔的元素就是最基本的選擇器购对。如果設(shè)置 H...
    饑人谷_小侯閱讀 867評論 0 1
  • 我們相戀八年,異地四年解幽,結(jié)婚三年 黃先生是做工程的贴见,東奔西跑,從南京到上海躲株,再到廈門片部,我總是一路追隨,疲憊霜定,狼狽档悠,...
    傲霜Sissi閱讀 505評論 10 10