web前端（8）—— CSS選擇器

番茄西紅柿發(fā)布于2019-04-23 13:11 / 1980人閱讀

摘要：選擇器選擇器，說(shuō)白了就是的標(biāo)簽或者其相關(guān)特性，在一個(gè)頁(yè)面中會(huì)有很多很多的元素，不同的元素可能會(huì)有不同的樣式，某些元素又需要設(shè)置相同的樣式，選擇器就是用來(lái)從頁(yè)面中查找特定元素的，找到元素之后就可以為它們?cè)O(shè)置樣式了。

選擇器

選擇器，說(shuō)白了就是html的標(biāo)簽或者其相關(guān)特性，在一個(gè)HTML頁(yè)面中會(huì)有很多很多的元素，不同的元素可能會(huì)有不同的樣式，某些元素又需要設(shè)置相同的樣式，選擇器就是用來(lái)從HTML頁(yè)面中查找特定元素的，找到元素之后就可以為它們?cè)O(shè)置樣式了。選擇器為樣式規(guī)則指定一個(gè)作用范圍

基本選擇器

基本選擇器包含以下選擇器：

標(biāo)簽選擇器
類選擇器
ID選擇器
通用選擇器

標(biāo)簽選擇器

標(biāo)簽選擇器說(shuō)白了就是html的標(biāo)簽元素，就像前面說(shuō)的h1-h6，p，div，form，ul，ol，li，a等等的，這些都可以是標(biāo)簽選擇器

注意：，也可以作為標(biāo)簽選擇器

類選擇器

這個(gè)選擇器很常用，也很重要。先說(shuō)說(shuō)什么是類，這樣，還是打開(kāi)百度首頁(yè)來(lái)講解

左邊我圈出來(lái)的class = s_ipt就是input的一個(gè)類屬性，右邊的css就是由類選擇器控制的，這樣就可以很好的找到此特有的標(biāo)簽

注意：

類選擇器的語(yǔ)法，【.s_ipt】，注意前面的點(diǎn)
類選擇在同一個(gè)html文件可以有多個(gè)

ID選擇器

ID選擇器和類選擇器很類似

還是百度這個(gè)例子

我圈出來(lái)的這個(gè) id=‘kw’ 就是id選擇器，右邊的#kw就是其id選擇器的css樣式

注意：

id選擇器的語(yǔ)法是【#kw】，注意前面的井號(hào)
id選擇器在同一個(gè)html文件里的屬性是唯一的，也就是說(shuō)百度首頁(yè)的html文件里，html里的標(biāo)簽只能由一個(gè)id叫kw的

通用選擇器

通用選擇器的就一個(gè)，用【*】代替，例：

* { color: black; }

* 號(hào)相信稍微是個(gè)愛(ài)研究的人都見(jiàn)過(guò)，在windows系統(tǒng)里表示通配符，可以代替一切的字符，在IT它也是這么個(gè)用法，可以表示一切字符，那么這里的自然表示所有的標(biāo)簽

組合選擇器

組合選擇器就是比較高級(jí)的用法，有時(shí)候我們可能只運(yùn)用上面的基本選擇器不是很方便，那么就可以用組合選擇器

組合選擇器包含有：

高級(jí)選擇器

子集選擇器

后代選擇器

相鄰選擇器

子代選擇器

說(shuō)這個(gè)之前，我希望您有這種思想，把html結(jié)構(gòu)想成一顆大樹，樹上有很多的枝葉，每個(gè)枝里又有很多小枝，這樣的話你可能會(huì)更好理解下面的，對(duì)以后的理論也更好理解

好的，接正文，子代選擇器即就是選擇此元素的直系子代，例：

div > p{
  font-size:15px;      
}

以上例子就是選擇div里的直系子代里的p標(biāo)簽

后代選擇器

后臺(tái)選擇器和前面的子代選擇器有些類似，不過(guò)后代是包含子代在內(nèi)的所有子子孫孫標(biāo)簽

例：

div  p{
  font-size:15px;      
}

以上表示選取div下的所有p標(biāo)簽，不管是不是直系子代

相鄰選擇器

相鄰選擇器有兩個(gè)，一個(gè)是前者（哥哥），一個(gè)后者（弟弟）

前者，用+：

div+p {
  color: red;
}

后者，用~：

div~p {
  color: red;
}

高級(jí)選擇器

高級(jí)選擇器里包含有并集，交集

并集，用逗號(hào)連接：

div,p,a{
  color:red;  
}

交集，直接連接，中間沒(méi)有空格：

交集用個(gè)完整的html來(lái)講解，可能大家才更好理解




    
    高級(jí)選擇器
    


    
    test1
    test2
    test3
    test4

測(cè)試結(jié)果：

屬性選擇器

屬性選擇器的特點(diǎn)就是可以很好的定位到人為定義的屬性，而不是已經(jīng)有的屬性，比如給html文件加一個(gè)特殊標(biāo)識(shí)，用屬性選擇器立馬就可以取到，并進(jìn)行調(diào)整樣式

屬性選擇器如果細(xì)分的話，有兩種，一個(gè)是屬性選擇器，一個(gè)是屬性-值選擇器




    
    屬性選擇
    


    test1

注意：屬性選擇器的語(yǔ)法是 [……]

而屬性選擇器最常用的就是表單：

input[type="text"] {
  backgroundcolor: red;
}

分組選擇器

當(dāng)多個(gè)元素的樣式相同的時(shí)候，我們沒(méi)有必要重復(fù)地為每個(gè)元素都設(shè)置樣式，我們可以通過(guò)在多個(gè)選擇器之間使用逗號(hào)分隔的分組選擇器來(lái)統(tǒng)一設(shè)置元素樣式

其實(shí)這個(gè)分組選擇就是前面高級(jí)選擇器里的并集選擇器，為什么它又叫分組選擇器，就是因?yàn)楹苤匾?/span>

h1,h2 {
  color: red;
}

偽類選擇器

偽類的意思就本來(lái)不存在的類，但是其又可以用

這個(gè)最常用的是對(duì)a和input標(biāo)簽的選取

偽類選擇器有：

:link

:active

:visited

:hover

:focus

:link

表示沒(méi)有訪問(wèn)的鏈接

a:link {
  color: blue;
}

:active

表示鼠標(biāo)點(diǎn)擊瞬間

a:active {
  color: black;
}

:visited

表示訪問(wèn)過(guò)，點(diǎn)擊過(guò)的鏈接

a:visited {
  color: gray;
}

:hover

表示光標(biāo)放上去但還未點(diǎn)擊的狀態(tài)

p:hover {
  cursor:pointer;
  background-color: #eee; 
}

:focus

input輸入框獲取焦點(diǎn)時(shí)（即正處于在輸入框輸入內(nèi)容時(shí)）樣式

input:focus {
  background-color: #eee;
}

以上最常用的就是：hover

偽元素選擇器

偽元素的概念和偽類很像，意思就是本來(lái)不存在的，但是又可以直接是用的

偽元素有：

first-leter

before

after

first-leter

用于為文本的首字母設(shè)置特殊樣式，說(shuō)白了就是那種文章首字母大寫的效果

p:first-letter {
  font-size: 48px;
}

before

用于在元素的內(nèi)容前面插入新內(nèi)容

p:before {
  content: "*"; /*在所有p標(biāo)簽的內(nèi)容前面加上一個(gè)紅色的**/
  color: red;
}

after

用于在元素的內(nèi)容后面插入新內(nèi)容

p:after {
  content: "?"; /*在所有p標(biāo)簽的內(nèi)容后面加上一個(gè)藍(lán)色的?*/
  color: red;
}

各種選擇器的優(yōu)先級(jí)(權(quán)重)

學(xué)完以上的各種各樣的選擇器，那么當(dāng)然以上的各種選擇器是可以混用的，那么混用的話，就會(huì)存在一個(gè)問(wèn)題，假如各種混用的選擇器剛好都對(duì)同一個(gè)元素選中并設(shè)置不同的樣式，這種的話，到底會(huì)顯示什么樣呢？

這個(gè)問(wèn)題也當(dāng)然不是問(wèn)題，因?yàn)槊總€(gè)選擇器都有優(yōu)先級(jí)（又叫權(quán)重）的，優(yōu)先級(jí)高就選擇誰(shuí)

各種選擇器的優(yōu)先級(jí)：

權(quán)重總結(jié)：

1.先看標(biāo)簽是否被選中，如果選中，就數(shù)id選擇器和類選擇器，標(biāo)簽選擇的權(quán)重，最后誰(shuí)的權(quán)重大就顯示誰(shuí)的，如果權(quán)重一樣大，后者覆蓋前者

2.如果沒(méi)有選中，權(quán)重為0，如果權(quán)重都是由父級(jí)繼承而來(lái)，且權(quán)重都是0，遵循就近原則，誰(shuí)描述的近就顯示誰(shuí)

3.！import權(quán)重最大

4.css多層嵌套，內(nèi)層元素會(huì)繼承外層元素的css樣式

GPU云服務(wù)器云服務(wù)器 css選擇器基礎(chǔ)選擇器css css選擇前端css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1551.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 735·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問(wèn)題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開(kāi)通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6182·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！