css序選擇器

1著摔,id一般都是留給js使用的缓窜,樣式一般用類名,而且在同一個文本下不能重復

2.一個標簽可以綁定多個類名

3.后代選擇器----所有指定的谍咆,兒子禾锤,孫子。摹察。恩掷。。

標簽名稱1 標簽名稱2供嚎,id名黄娘,class名{}

4.子元素

標簽名稱1>標簽名稱2>{

屬性:值;

}

注意:子元素只會選擇兒子克滴,不會查找其他被嵌套的部分

不要有空格逼争,

5.后代選擇器與子元素區(qū)別

1)后以空格隔開

子以>隔開

2)后選中所有特定后代標簽

子以只會選擇特定的兒子標簽

3)都可以選擇標簽名,id名劝赔,class名誓焦,可以通過它們自己的連接符合一直連接下去

6.交集選擇器

作用:給所有選擇器選中的標簽中,給相交的部分設置屬性

格式:選擇器1選擇器2{}

注意:選擇器與選擇器之間沒有連接符着帽,


交集選擇器實例

7罩阵,并集選擇器

作用:給所有選擇器指定樣式

格式:選擇器,選擇器,


并集選擇器實例

8.兄弟選擇器

1)相鄰兄弟選擇器

作用:給指定選擇器后面相鄰緊跟的那個選擇器中的標簽設置屬性

格式

選擇器1+選擇器2{
? ?屬性值

}

注意:

相鄰兄弟選擇器只能選中緊跟其后的那個標簽,不能選擇被隔開的標簽


html實例


樣式启摄,h1緊跟的p標簽顏色變?yōu)榧t色

2)通用兄弟選擇器

作用:給指定選擇器后面那個選擇器中的標簽設置屬性

格式:選擇器~選擇器{}

注意:指定選擇器后面某個選擇器指定的標簽


所有h1后面的p標簽的字體顏色都變成紅色


9.css3新增的選擇器個數(shù)選擇器


常用的

1)選擇同級別的不區(qū)分類型

選擇器:first-child:選擇同級別的第一個標簽稿壁;

注意點:不區(qū)分類型


樣式


同級別下第一個標簽是h1,不是p所以上面的那個樣式是無效的



這樣同級別下第一標簽為p,這樣的樣式就是有效的

選擇器:last-child{

}


樣式


不區(qū)分類別歉备,只有33顯示為紅色

:nth-child(n)同級別下的第幾個元素

樣式

樣式

兩個22都會變成紅色

兩個22都會變成紅色

:nth-last-child(n)同級別下的倒數(shù)第幾個元素


樣式


第一個的33和第二的22都變成了紅色



2)同級別中同類型的

選擇器:first-of-type{ ? ? ? ? ? ? -------------同級別中的第一個標簽

}


樣式


這樣11就變成紅色

last-of-type同級別同類型的最后一個


樣式
這樣的話傅是,兩個33都變成紅色

:nth-of-type(n)同級別同類型下的第幾個元素


樣式


兩個33都變成紅色

nth-last-of-type(n)同級別同類型下的倒數(shù)第幾個元素


樣式


兩個22都變成紅色


3)only-child選中父元素中唯一的元素


樣式


body下有p和div兩個元素,div下只有p這一個元素,所以p標簽下的字體顏色為紅色

4)only-of-type


樣式


body下有一個p標簽和div下也只有一個p標簽所以都變成紅色

5)同級別的所有的奇數(shù)或者偶數(shù)標簽變成紅色

nth-child(odd) ? xn+y n從0開始

nth-child(even)

6)同級別同類型的

nth-of-type(odd)? ? xn+y n從0開始

nth-of-type(even)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末喧笔,一起剝皮案震驚了整個濱河市帽驯,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌书闸,老刑警劉巖尼变,帶你破解...
    沈念sama閱讀 218,607評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異浆劲,居然都是意外死亡嫌术,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,239評論 3 395
  • 文/潘曉璐 我一進店門牌借,熙熙樓的掌柜王于貴愁眉苦臉地迎上來度气,“玉大人,你說我怎么就攤上這事膨报×准” “怎么了?”我有些...
    開封第一講書人閱讀 164,960評論 0 355
  • 文/不壞的土叔 我叫張陵现柠,是天一觀的道長院领。 經(jīng)常有香客問我,道長够吩,這世上最難降的妖魔是什么栅盲? 我笑而不...
    開封第一講書人閱讀 58,750評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮废恋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘扒寄。我一直安慰自己鱼鼓,他們只是感情好,可當我...
    茶點故事閱讀 67,764評論 6 392
  • 文/花漫 我一把揭開白布该编。 她就那樣靜靜地躺著迄本,像睡著了一般。 火紅的嫁衣襯著肌膚如雪课竣。 梳的紋絲不亂的頭發(fā)上嘉赎,一...
    開封第一講書人閱讀 51,604評論 1 305
  • 那天,我揣著相機與錄音于樟,去河邊找鬼公条。 笑死,一個胖子當著我的面吹牛迂曲,可吹牛的內(nèi)容都是我干的靶橱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,347評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼关霸!你這毒婦竟也來了传黄?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,253評論 0 276
  • 序言:老撾萬榮一對情侶失蹤队寇,失蹤者是張志新(化名)和其女友劉穎膘掰,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體佳遣,經(jīng)...
    沈念sama閱讀 45,702評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡识埋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,893評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了苍日。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惭聂。...
    茶點故事閱讀 40,015評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖相恃,靈堂內(nèi)的尸體忽然破棺而出辜纲,到底是詐尸還是另有隱情,我是刑警寧澤拦耐,帶...
    沈念sama閱讀 35,734評論 5 346
  • 正文 年R本政府宣布耕腾,位于F島的核電站,受9級特大地震影響杀糯,放射性物質(zhì)發(fā)生泄漏扫俺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,352評論 3 330
  • 文/蒙蒙 一固翰、第九天 我趴在偏房一處隱蔽的房頂上張望狼纬。 院中可真熱鬧,春花似錦骂际、人聲如沸疗琉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,934評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽盈简。三九已至,卻和暖如春太示,著一層夾襖步出監(jiān)牢的瞬間柠贤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,052評論 1 270
  • 我被黑心中介騙來泰國打工类缤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留臼勉,地道東北人。 一個月前我還...
    沈念sama閱讀 48,216評論 3 371
  • 正文 我出身青樓餐弱,卻偏偏與公主長得像坚俗,于是被迫代替她去往敵國和親镜盯。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,969評論 2 355

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

  • 1.class 和 id 的使用場景? 類選擇器允許以一種獨立于文檔元素的方式來指定樣式。該選擇器可以單獨使用恩闻,也...
    草鞋弟閱讀 2,419評論 0 1
  • 1.class 和 id 的使用場景? 兩者都能選取DOM節(jié)點并給DOM節(jié)點添加樣式艺糜,但是W3C標準里規(guī)定頁面中只...
    饑人谷_米彌輪閱讀 393評論 0 1
  • class 和 id 的使用場景? 每個標簽只能設置一個id,此id在頁面中只能出現(xiàn)一次幢尚。id多用于頁面分塊時塊級...
    cross_王閱讀 440評論 0 0
  • CSS選擇器 標簽選擇器 什么是標簽選擇器? 作用: 根據(jù)指定的標簽名稱, 在當前界面中找到所有該名稱的標簽, 然...
    Jackson_yee_閱讀 507評論 0 0
  • 1.class 和 id 的使用場景? class:類選擇器破停,一個標簽可以有多個類且同一個類可以用到不同的標簽上,...
    饑人谷_兔子君閱讀 1,194評論 0 0