HTML----選擇器

選擇器

選擇器(selector)洗贰,會(huì)告訴瀏覽器:網(wǎng)頁(yè) 上的哪些元素需要設(shè)置什么樣的樣式颂翼。

元素選擇器

最常見(jiàn)的 CSS 選擇器是元素選擇器。換句話說(shuō),文檔的元素就是最基本的選擇器


   h1{
        color: pink;
        font-size:100px;
    }

類選擇器

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

.lllloooo{
        color:red;
    }
<p class="p2 lllloooo">呵呵哈哈哈</p>

ID選擇器

ID選擇器,可以根據(jù)元素的id屬性值選取 元素嵌施。
#p1,.p2,h1{
        background-color: yellow;

    }

<p id="p1">呵呵哈哈哈</p>

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

復(fù)合選擇器饲化,可以同時(shí)使用多個(gè)選擇器, 這樣可以選擇同時(shí)滿足多個(gè)選擇器的元素

span.p3{
        background-color: yellow;
    }
<span class='p3'>呵呵哈哈哈</span>

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

群組選擇器吗伤,可以同時(shí)使用多個(gè)選擇器吃靠, 多個(gè)選擇器將被同時(shí)應(yīng)用指定的樣式。

#p1,.p2,h1{
        background-color: yellow;
    }
<h1>呵呵哈哈哈</h1>
<p class="p2 lllloooo">呵呵哈哈哈</p>
<p id="p1">呵呵哈哈哈</p>

通用選擇器

通用選擇器足淆,可以同時(shí)選中頁(yè)面中的所有 元素



其他選擇器()

偽類

給段落定義樣式

正常鏈接

:link

訪問(wèn)過(guò)的鏈接

:visited(只能定義字體顏色)

鼠標(biāo)滑過(guò)的鏈接

:hover

正在點(diǎn)擊的鏈接

:active

獲取焦點(diǎn)

:focus

指定元素前

:before

指定元素后

:after

選中的元素

::selection

子元素選擇器

子元素選擇器可以給另一個(gè)元素的子元素 設(shè)置樣式巢块。
:first-child
選擇第一個(gè)子標(biāo)簽
:last-child
選擇最后一個(gè)子標(biāo)簽
:nth-child
選擇指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
選擇指定類型的子元素

兄弟選擇器

查找后邊一個(gè)兄弟元素

兄弟元素 + 兄弟元素{}

查找后邊所有的兄弟元素

兄弟元素 ~ 兄弟元素{}

繼承

就像父親的財(cái)產(chǎn)會(huì)遺傳給兒子一樣捺球,在CSS中祖先元素的樣式 同樣也會(huì)被子元素繼承。
繼承是指應(yīng)用在一個(gè)標(biāo)簽上的那些CSS樣式會(huì)同時(shí)被應(yīng)用到其 內(nèi)嵌標(biāo)簽上夕冲。

比如為父元素設(shè)置了字體顏色,子元素也會(huì)應(yīng)用上相同的顏色裂逐。
當(dāng)然并不是所有的樣式都會(huì)被繼承歹鱼,這一點(diǎn)我們講到具體樣式 時(shí),再去討論卜高。



選擇器的權(quán)重

在頁(yè)面中使用CSS選擇器選中元素時(shí)弥姻,經(jīng)常都是一個(gè)元素同時(shí)被多個(gè) 選擇器選中。

比如:
body h1
h1
上邊的兩個(gè)選擇器都會(huì)選擇h1元素掺涛,如果兩個(gè)選擇器設(shè)置的樣式不一 致那還好不會(huì)產(chǎn)生沖突庭敦,但是如果兩個(gè)選擇器設(shè)置的是同一個(gè)樣式, 這樣h1到底要應(yīng)用那個(gè)樣式呢薪缆?CSS中會(huì)默認(rèn)使用權(quán)重較大的樣式秧廉, 權(quán)重又是如何計(jì)算的呢?



權(quán)重的計(jì)算

不同的選擇器有不同的權(quán)重值:
內(nèi)聯(lián)樣式:權(quán)重是 1000(不推薦寫內(nèi)聯(lián)樣式)
id選擇器:權(quán)重是 100
類拣帽、屬性疼电、偽類選擇器:權(quán)重是 10
元素選擇器:權(quán)重是 1
通配符:權(quán)重是 0

!important最高權(quán)重提升(指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán))

div{
    color:#f00!important;
}
計(jì)算權(quán)重需要將一個(gè)樣式的全部選擇器相加,
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末减拭,一起剝皮案震驚了整個(gè)濱河市蔽豺,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拧粪,老刑警劉巖修陡,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異可霎,居然都是意外死亡魄鸦,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門癣朗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)号杏,“玉大人,你說(shuō)我怎么就攤上這事斯棒《苤拢” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵荣暮,是天一觀的道長(zhǎng)庭惜。 經(jīng)常有香客問(wèn)我,道長(zhǎng)穗酥,這世上最難降的妖魔是什么护赊? 我笑而不...
    開(kāi)封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任惠遏,我火速辦了婚禮,結(jié)果婚禮上骏啰,老公的妹妹穿的比我還像新娘节吮。我一直安慰自己,他們只是感情好判耕,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布透绩。 她就那樣靜靜地躺著,像睡著了一般壁熄。 火紅的嫁衣襯著肌膚如雪帚豪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天草丧,我揣著相機(jī)與錄音狸臣,去河邊找鬼。 笑死昌执,一個(gè)胖子當(dāng)著我的面吹牛烛亦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播懂拾,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼此洲,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了委粉?” 一聲冷哼從身側(cè)響起呜师,我...
    開(kāi)封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎贾节,沒(méi)想到半個(gè)月后汁汗,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡栗涂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年知牌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斤程。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡角寸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出忿墅,到底是詐尸還是另有隱情扁藕,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布疚脐,位于F島的核電站亿柑,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏棍弄。R本人自食惡果不足惜望薄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一疟游、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧痕支,春花似錦颁虐、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至故慈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間框全,已是汗流浹背察绷。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留津辩,地道東北人拆撼。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像喘沿,于是被迫代替她去往敵國(guó)和親闸度。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

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

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案蚜印? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,759評(píng)論 1 92
  • 其實(shí)平時(shí)用得多的選擇器無(wú)非也就是那么幾個(gè)莺禁,時(shí)間久了,許多不常用的選擇器就慢慢忘記了窄赋。為了不讓自己忘記這些選擇器哟冬,今...
    盛夏晚清風(fēng)閱讀 1,841評(píng)論 0 5
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開(kāi)發(fā)》時(shí),所整理的筆記忆绰。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,344評(píng)論 0 7
  • 這是html選擇器的測(cè)試題: html選擇器測(cè)試題--帶答案_免費(fèi)高速下載|百度網(wǎng)盤-分享無(wú)限制 1浩峡,plate ...
    常偉波閱讀 940評(píng)論 0 0
  • 我就是個(gè)蠢貨...
    你來(lái)我的烏托邦閱讀 92評(píng)論 0 0