選擇器
選擇器(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;
}