CSS選擇器

標(biāo)簽選擇器

標(biāo)簽選擇器其實就是html代碼中的標(biāo)簽。<html>骆姐、<body>笔呀、<h1>、<p>髓需、<img>许师。
例如下面代碼:
p{font-size:12px;line-height:1.6em;}

類選擇器

語法:

.類選器名稱{css樣式代碼;}

注意:

  1. 英文圓點開頭
  2. 其中類選器名稱可以任意起名(但不要起中文噢)

例如:
span class="stress">膽小如鼠</span>
.stress{color:red;}/*類前面要加入一個英文圓點*/

ID選擇器

在很多方面,ID選擇器都類似于類選擇符僚匆,但也有一些重要的區(qū)別:

  1. 為標(biāo)簽設(shè)置id="ID名稱"微渠,而不是class="類名稱"。
  2. ID選擇符的前面是井號(#)號咧擂,而不是英文圓點(.)逞盆。

類和ID選擇器的區(qū)別

相同點:可以應(yīng)用于任何元素
不同點:

  1. ID選擇器只能在文檔中使用一次。與類選擇器不同松申,在一個HTML文檔中云芦,ID選擇器只能使用一次,而且僅一次贸桶。而類選擇器可以使用多次舅逸。

下面代碼是正確的:
<p>三年級時,我還是一個<span class="stress">膽小如鼠</span>的小女孩皇筛,上課從來不敢回答老師提出的問題琉历,生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題水醋。</p>

而下面代碼是錯誤的:(id 是標(biāo)識旗笔,唯一不可重復(fù))
<p>三年級時,我還是一個<span id="stress">膽小如鼠</span>的小女孩拄踪,上課從來不敢回答老師提出的問題蝇恶,生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題惶桐。</p>

2艘包、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式。我們可以為一個元素同時設(shè)多個樣式耀盗,但只可以用類選擇器的方法實現(xiàn)想虎,ID選擇器是不可以的(不能使用 ID 詞列表)。

下面的代碼是正確的
.stress{ color:red; } .bigsize{ font-size:25px; }
<p>到了<span class="stress bigsize">三年級</span>下學(xué)期時叛拷,我們班上了一節(jié)公開課...</p>

下面的代碼是不正確的

#stressid{ color:red; }
#bigsizeid{ font-size:25px; }

<p>到了<span id="stressid bigsizeid">三年級</span>下學(xué)期時舌厨,我們班上了一節(jié)公開課...</p>

子選擇器
還有一個比較有用的選擇器子選擇器,即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素忿薇。如右側(cè)代碼編輯器中的代碼:

.food>span{border:1px solid red;}

包含(后代)選擇器

包含選擇器裙椭,即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素躏哩。
.first span{color:red;}

子選擇器與后代選擇器區(qū)別

  • 子選擇器(child selector)僅是指它的直接后代,或者你可以理解為作用于子元素的第一代后代揉燃。
  • 而后代選擇器是作用于所有子后代元素扫尺。后代選擇器通過空格來進行選擇,而子選擇器是通過“>”進行選擇炊汤。
  • 總結(jié):>作用于元素的第一代后代正驻,空格作用于元素的所有后代。

后代選擇器實現(xiàn)預(yù)期效果


子選擇器并沒有實現(xiàn)預(yù)期效果


通用選擇器

通用選擇器是功能最強大的選擇器抢腐,它使用一個(*)號指定姑曙,它的作用是匹配html中所有標(biāo)簽元素,如下使用下面代碼使用html中任意標(biāo)簽元素字體顏色全部設(shè)置為紅色:

* {color:red;}

偽類選擇符

更有趣的是偽類選擇符迈倍,為什么叫做偽類選擇符伤靠,它允許給html不存在的標(biāo)簽(標(biāo)簽的某種狀態(tài))設(shè)置樣式,比如說我們給html中一個標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色:
a:hover{color:red;}

上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅啼染。這樣就會使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標(biāo)滑過字體顏色變?yōu)榧t色特效宴合。

  • 關(guān)于偽選擇符: 關(guān)于偽類選擇符,到目前為止迹鹅,可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標(biāo)簽上使用 :hover 了(其實偽類選擇符還有很多形纺,尤其是 css3 中,但是因為不能兼容所有瀏覽器徒欣,這里只說這么多)逐样。
  • 其實 :hover 可以放在任意的標(biāo)簽上,比如說 p:hover打肝,但是它們的兼容性也是很不好的脂新,所以現(xiàn)在比較常用的還是 a:hover 的組合。

分組選擇符

當(dāng)你想為html中多個標(biāo)簽元素設(shè)置同一個樣式時粗梭,可以使用分組選擇符(争便,),如下代碼為右側(cè)代碼編輯器中的h1断医、span標(biāo)簽同時設(shè)置字體顏色為紅色:
h1,span{color:red;}
它相當(dāng)于下面兩行代碼:
h1{color:red;} span{color:red;}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末滞乙,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子鉴嗤,更是在濱河造成了極大的恐慌斩启,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件醉锅,死亡現(xiàn)場離奇詭異兔簇,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進店門垄琐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來边酒,“玉大人,你說我怎么就攤上這事狸窘《针” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵翻擒,是天一觀的道長氓涣。 經(jīng)常有香客問我,道長韭寸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任荆隘,我火速辦了婚禮恩伺,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘椰拒。我一直安慰自己晶渠,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布燃观。 她就那樣靜靜地躺著褒脯,像睡著了一般。 火紅的嫁衣襯著肌膚如雪缆毁。 梳的紋絲不亂的頭發(fā)上番川,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機與錄音脊框,去河邊找鬼颁督。 笑死,一個胖子當(dāng)著我的面吹牛浇雹,可吹牛的內(nèi)容都是我干的沉御。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼昭灵,長吁一口氣:“原來是場噩夢啊……” “哼吠裆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起烂完,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤试疙,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后抠蚣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體效斑,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了缓屠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片奇昙。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖敌完,靈堂內(nèi)的尸體忽然破棺而出储耐,到底是詐尸還是另有隱情,我是刑警寧澤滨溉,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布什湘,位于F島的核電站,受9級特大地震影響晦攒,放射性物質(zhì)發(fā)生泄漏闽撤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一脯颜、第九天 我趴在偏房一處隱蔽的房頂上張望哟旗。 院中可真熱鬧,春花似錦栋操、人聲如沸闸餐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽舍沙。三九已至,卻和暖如春剔宪,著一層夾襖步出監(jiān)牢的瞬間拂铡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工葱绒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留和媳,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓哈街,卻偏偏與公主長得像留瞳,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子骚秦,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

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

  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器她倘。換句話說,文檔的元素就是最基本的選擇器作箍。如果設(shè)置 H...
    饑人谷_小侯閱讀 855評論 0 1
  • 一硬梁、CSS選擇器常見的有幾種? 基本選擇器 通配選擇器~選擇文檔中所有的html元素,用一個*表示 元素選擇器~選...
    dengpan閱讀 961評論 0 3
  • 1.class 和 id 的使用場景? class:類選擇器胞得,一個標(biāo)簽可以有多個類且同一個類可以用到不同的標(biāo)簽上荧止,...
    饑人谷_兔子君閱讀 1,183評論 0 0
  • 1.class 和 id 的使用場景? class是類,用于CSS,可以多個HTML標(biāo)簽復(fù)用跃巡。id是HTML標(biāo)簽的...
    山門龍龍閱讀 456評論 0 1
  • CSS選擇器常見的有幾種? 類型選擇器(元素選擇器): 后代選擇器 上述選擇器適用于那些應(yīng)用范圍廣的一般樣式危号。 I...
    coolheadedY閱讀 569評論 1 2