2019-03-21

css選擇器

選擇器(selector)录淡,會告訴瀏覽器:網(wǎng)頁上的那些元素需要設(shè)置什么樣的樣式垂蜗。

比如:p這個選擇器就表示選擇頁面中的所有的p元素,在選擇器之后所設(shè)置的樣式會應(yīng)用到所有的p元素上.

元素選擇器

元素選擇器(標(biāo)簽選擇器),可以根據(jù)標(biāo)簽的名字來從頁面中選取指定的元素你弦。

語法:

????????????標(biāo)簽名{? }

比如p則會選中頁面中的所有p標(biāo)簽弃衍,h1會 選中頁面中的所有h1標(biāo)簽呀非。

類選擇器

類選擇器,可以根據(jù)元素的class屬性值選取素镜盯。

語法:

? ? ? ? .className{? }

比如.hello會選中頁面所有class屬性為hello的元素

ID選擇器

ID選擇器岸裙,可以根據(jù)元素的id屬性值選取元素。

語法:

? ? ? ? #id{? ?}

?比如#box會選中頁面中id屬性值為box的 元素速缆,和class屬性不同降允,id屬性是不能重復(fù)的。

復(fù)合選擇器(交集選擇器)

?復(fù)合選擇器艺糜,可以同時使用多個選擇器剧董,? 這樣可以選擇同時滿足多個選擇器的元素。

語法:

? ? ? ? -選擇器1選擇器2{? ?}

例如div.box1 會選中頁面中具有box1這個class的div元素

群組選擇器(并集選擇器)

群組選擇器破停,可以同時使用多個選擇器翅楼, 多個選擇器將被同時應(yīng)用指定的樣式。

語法:

? ? ? ? 選擇器1真慢,選擇器2毅臊, 選擇器3{ }

比如p,.hello, #box會同時選中頁面中p元素黑界,class為hello的元素管嬉,id為box的元素

通用選擇器

?通用選擇器皂林,可以同時選中頁面中的所有元素。

語法:

? ? ? ? *{ }

后代選擇器

?后代選擇器可以根據(jù)標(biāo)簽的關(guān)系宠蚂,為處在元素內(nèi)部的代元素設(shè)置樣式式撼。

語法:?

? ? ? ? 祖先元素? 后代元素? 后代元素{? }

比如p strong 會選中頁面中所有的P元素,內(nèi)的strong元素求厕。

偽類和偽元素

?有時候著隆,你需要選擇本身沒有標(biāo)簽,但是

仍然易于識別的網(wǎng)頁部位呀癣,比如段落首行 或鼠標(biāo)滑過的連接美浦。CSS為他們提供一些選擇器:偽類和偽元素。

給鏈接定義樣式

有四個偽類可以讓你根據(jù)訪問者與該鏈接的交互方式项栏,將鏈接設(shè)置成4種不同的狀態(tài)浦辨。

正常鏈接

????????-a:link

訪問過的鏈接

? ? ? ? -a:visited(只能定義自體顏色)

鼠標(biāo)劃過的鏈接? ? ??

? ? ? ? -a:hover

正在點擊的鏈接

? ? ? ? -a:active

獲取焦點

? ? ? ? -:focus

制定元素前

? ? ? ? -:before

指定元素后

? ? ? ? -:after

選中的元素

? ? ? ? -::selection

給段落定義樣式

首字母

? ? ? ? -:first-letter

首行

? ? ? ? -:first-line

屬性選擇器

屬性選擇器可以挑選帶有特殊屬性的標(biāo)簽

語法:

? ?????[屬性名]?

????????[屬性名="屬性值"]? ? ?選取含有指定性值的元素

????????[屬性名~="屬性值"]? ?

????????[屬性名|="屬性值"]

????????[屬性名^="屬性值"]? ?以什么為開頭的屬性值

????????[屬性名$="屬性值"]? ? 以什么為結(jié)尾的屬性值

? ? ? ? [屬性名*="屬性值"]? ? 選取屬性值包含制定內(nèi)容的元素

子元素選擇器

子元素選擇器可以給另一個元素的子元素設(shè)置樣式。

語法:

? ? ? ? 父元素 > 子元素{ }

比如body > h1 將選擇body子標(biāo)簽中的所有h1標(biāo)簽沼沈。

其他子元素選擇器

:first-child? ? ? ? 選擇第一個子標(biāo)簽

:last-child? ? ? ? 選擇最后一個子標(biāo)簽

:nth-child? ? ? ? 選擇指定位置的子元素

:first-of-type

:last-of-type

:nth-of-type? ? ? ? 選擇指定類型的子元素

兄弟選擇器

除了根據(jù)祖先父子關(guān)系流酬,還可以根據(jù)兄弟關(guān)系查找元素。

語法:

? ? ? ? 查找后邊一個兄弟元素

? ? ? ? ? ? 兄弟元素 + 兄弟元素{}

? ? ? ? 查找后邊所有的兄弟元素

? ? ? ? ? ? 兄弟元素 ~ 兄弟元素{}

否定偽類

?否定偽類可以幫助我們選擇不是其他東西的某件東西列另。

語法:

? ? ? ? :not(選擇器){}

比如p:not(.hello)表示選擇所有的p元素但是class為hello的除外芽腾。

? ? ? ??

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市页衙,隨后出現(xiàn)的幾起案子摊滔,更是在濱河造成了極大的恐慌,老刑警劉巖店乐,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件艰躺,死亡現(xiàn)場離奇詭異,居然都是意外死亡眨八,警方通過查閱死者的電腦和手機腺兴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來廉侧,“玉大人页响,你說我怎么就攤上這事》拢” “怎么了拘泞?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枕扫。 經(jīng)常有香客問我陪腌,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任诗鸭,我火速辦了婚禮染簇,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘强岸。我一直安慰自己锻弓,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布蝌箍。 她就那樣靜靜地躺著青灼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪妓盲。 梳的紋絲不亂的頭發(fā)上杂拨,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天,我揣著相機與錄音悯衬,去河邊找鬼弹沽。 笑死,一個胖子當(dāng)著我的面吹牛筋粗,可吹牛的內(nèi)容都是我干的策橘。 我是一名探鬼主播,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼娜亿,長吁一口氣:“原來是場噩夢啊……” “哼丽已!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起暇唾,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤促脉,失蹤者是張志新(化名)和其女友劉穎辰斋,沒想到半個月后策州,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡宫仗,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年够挂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片藕夫。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡孽糖,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出毅贮,到底是詐尸還是另有隱情办悟,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布滩褥,位于F島的核電站病蛉,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜铺然,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一俗孝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧魄健,春花似錦赋铝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至析恋,卻和暖如春苛蒲,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背绿满。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工臂外, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人喇颁。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓漏健,卻偏偏與公主長得像,于是被迫代替她去往敵國和親橘霎。 傳聞我的和親對象是個殘疾皇子蔫浆,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,515評論 2 359

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

  • 塊元素和內(nèi)聯(lián)元素 塊元素: 所謂的塊元素就是會獨占一行的元素?zé)o論它的內(nèi)容有多少,它都會獨占一整行 常見的塊元素:d...
    呂若凡閱讀 350評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案姐叁? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,759評論 1 92
  • CSS選擇器: 元素選擇器 ID選擇器: 類選擇器 選擇器分組() 塊元素和內(nèi)聯(lián)元素塊元素所謂的塊元素就是會獨占一...
    yustyal閱讀 254評論 0 0
  • 選擇器 選擇器瓦盛,會告訴瀏覽器:網(wǎng)頁上的哪些元素需要設(shè)置什么樣的樣式。 元素選擇器:可以根據(jù)標(biāo)簽的名字來從頁面中選取...
    _奮斗努力閱讀 425評論 0 0
  • 選擇器?選擇器(selector)外潜,會告訴瀏覽器:網(wǎng)頁上的哪些元素需要設(shè)置什么樣的樣式原环。 ?比如:p這個選擇器就表...
    Promise_18閱讀 279評論 0 0