CSS選擇器

  1. 元素選擇器/標(biāo)簽選擇器(element選擇器)
    a.酝枢、以文檔語言對象類型作為選擇器很洋,即使用結(jié)構(gòu)中元素名稱作為選擇器。例如:body隧枫、div喉磁、p、img官脓、em协怒、strong、span等等卑笨;
    b孕暇、所有的頁面元素都可以作為選擇器;
    c赤兴、 如果想改變某個(gè)元素的默認(rèn)樣式時(shí)妖滔,可以選擇元素選擇器;統(tǒng)一文檔某個(gè)元素效果時(shí)桶良,可以使用類型選擇器座舍。

  2. id選擇器
    a、在標(biāo)簽內(nèi)部加入id屬性陨帆,取一個(gè)值(注意:不能以數(shù)字開頭曲秉,建議以英文字母開頭,可以包含數(shù)字疲牵、字母承二、下劃線和-);
    b纲爸、在css中通過#值{}進(jìn)行使用 標(biāo)明選中當(dāng)前頁面中id屬性值為“值”的元素亥鸠;
    c、id屬性值在當(dāng)前頁面中必須唯一识啦;
    d负蚊、id選擇器主要用在網(wǎng)頁的外圍結(jié)構(gòu)。

  3. class選擇器
    a袁滥、在標(biāo)簽內(nèi)部加上class屬性盖桥,取一個(gè)值(注意:不能以數(shù)字開頭灾螃,建議以英文字母開頭题翻,可以包含數(shù)字、字母、下劃線和-)嵌赠,也可以給class屬性多個(gè)值塑荒,值與值之間用空格隔開就行了;
    b姜挺、在css中通過.class屬性值{}進(jìn)行使用齿税,表示選中當(dāng)前頁面中所有的class屬性為“值”的元素;
    c炊豪、使用場合:對某些元素進(jìn)行統(tǒng)一樣式的設(shè)置就可以設(shè)置相同的class凌箕。

  4. *通配符(全局選擇器)
    a、通配符表示選中當(dāng)前頁面中所有的元素词渤;
    b牵舱、主要用于樣式的重置。

  5. 交集選擇器
    標(biāo)簽選擇器與class選擇器的交集
    標(biāo)簽選擇器與屬性選擇器的交集
    標(biāo)簽選擇器與偽類選擇器的交集
    標(biāo)簽選擇器與偽元素選擇器的交集
    書寫的注意:選擇器與選擇器之間一定要緊挨著寫缺虐,不能為空格或者其他的符號

  6. 并集選擇器(群組選擇器)
    當(dāng)有多個(gè)選擇器應(yīng)用相同的樣式時(shí)芜壁,可以將選擇器用”,”分隔,合并為一組高氮。
    語法:選擇器1,選擇器2,選擇器3{ 屬性: 屬性值; }

  7. 后代選擇器(包含選擇器)
    選擇器1和選擇器2用空格隔開慧妄,含義就是選擇器1中包含的所有選擇器2
    語法:選擇器1 選擇器2 選擇器3 選擇器4{ 屬性: 屬性值; }

  8. 子選擇器
    選擇器1和選擇器2用>連接,含義就是選擇器1中所有子一級選擇器2.
    語法:選擇器1>選擇器2>選擇器3{ 屬性: 屬性值; }

  9. 超鏈接的四種偽類樣式
    a:link{屬性:屬性值;}超鏈接的初始狀態(tài);
    a:visited{屬性:屬性值;}超鏈接被訪問后的狀態(tài);
    a:hover{屬性:屬性值;}鼠標(biāo)懸停剪芍,即鼠標(biāo)劃過超鏈接時(shí)的狀態(tài);
    a:active{屬性:屬性值;}超鏈接被激活時(shí)的狀態(tài)塞淹,即鼠標(biāo)按下時(shí)超鏈接的狀態(tài);
    (1)當(dāng)這4個(gè)超鏈接偽類選擇器聯(lián)合使用時(shí),應(yīng)注意他們的順序罪裹,正常順序?yàn)椋?
    a:link,a:visited,a:hover,a:active,錯(cuò)誤的順序有時(shí)會使超鏈接的樣式失效窖铡;
    (2)為了簡化代碼,可以把偽類選擇符中相同的聲明提出來放在a選擇符中坊谁;
    例如:a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態(tài)都相同费彼,只有鼠標(biāo)劃過變顏色

  10. 選擇器的權(quán)重
    css中用四位數(shù)字表示權(quán)重,權(quán)重的表達(dá)方式如:0口芍,0箍铲,0,0
    標(biāo)簽選擇器的權(quán)重為0001
    class選擇器的權(quán)重為0010
    id選擇器的權(quán)重為0100
    屬性選擇器的權(quán)重為0010
    偽類選擇器的權(quán)重為0010
    偽元素選擇器的權(quán)重為0010
    后代鬓椭、子颠猴、交集選擇器的權(quán)重:為組成的選擇器的權(quán)重之和
    繼承樣式的權(quán)重為0000
    行內(nèi)樣式的權(quán)重為1000

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市小染,隨后出現(xiàn)的幾起案子翘瓮,更是在濱河造成了極大的恐慌,老刑警劉巖裤翩,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件资盅,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)呵扛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門每庆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人今穿,你說我怎么就攤上這事缤灵。” “怎么了蓝晒?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵腮出,是天一觀的道長。 經(jīng)常有香客問我芝薇,道長利诺,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任剩燥,我火速辦了婚禮慢逾,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘灭红。我一直安慰自己侣滩,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布变擒。 她就那樣靜靜地躺著君珠,像睡著了一般。 火紅的嫁衣襯著肌膚如雪娇斑。 梳的紋絲不亂的頭發(fā)上策添,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天,我揣著相機(jī)與錄音毫缆,去河邊找鬼唯竹。 笑死,一個(gè)胖子當(dāng)著我的面吹牛苦丁,可吹牛的內(nèi)容都是我干的浸颓。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼旺拉,長吁一口氣:“原來是場噩夢啊……” “哼产上!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蛾狗,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤晋涣,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后沉桌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谢鹊,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡算吩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了撇贺。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赌莺。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冰抢,死狀恐怖松嘶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情挎扰,我是刑警寧澤翠订,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站遵倦,受9級特大地震影響尽超,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜梧躺,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一似谁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧掠哥,春花似錦巩踏、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至禁舷,卻和暖如春彪杉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背牵咙。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工派近, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人洁桌。 一個(gè)月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓构哺,卻偏偏與公主長得像,于是被迫代替她去往敵國和親战坤。 傳聞我的和親對象是個(gè)殘疾皇子曙强,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

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

  • 其實(shí)平時(shí)用得多的選擇器無非也就是那么幾個(gè),時(shí)間久了途茫,許多不常用的選擇器就慢慢忘記了碟嘴。為了不讓自己忘記這些選擇器,今...
    盛夏晚清風(fēng)閱讀 1,834評論 0 5
  • 1.CSS 元素選擇器 最常見的 CSS 選擇器是元素選擇器囊卜。換句話說娜扇,文檔的元素就是最基本的選擇器错沃。如果設(shè)置 H...
    饑人谷_小侯閱讀 864評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評論 1 92
  • class 和 id 的使用場景? class 重在樣式的復(fù)用雀瓢,重普遍性枢析。id重在劃分樣式區(qū)域,可以作為樣式表中的...
    南山碼農(nóng)閱讀 374評論 0 0
  • 1. class 和 id 的使用場景: id:id選擇器刃麸,使用#name定義(name為id名醒叁,可任意取名),使...
    石林濤閱讀 373評論 0 1