web前端（8）—— CSS選擇器_ZenDei技術網路在線

選擇器選擇器，說白了就是html的標簽或者其相關特性，在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素之後就可以為它們設置樣式了。選擇器為樣式規則指定一個作用範圍 ...

選擇器

選擇器，說白了就是html的標簽或者其相關特性，在一個HTML頁面中會有很多很多的元素，不同的元素可能會有不同的樣式，某些元素又需要設置相同的樣式，選擇器就是用來從HTML頁面中查找特定元素的，找到元素之後就可以為它們設置樣式了。選擇器為樣式規則指定一個作用範圍

基本選擇器

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

標簽選擇器
類選擇器
ID選擇器
通用選擇器

標簽選擇器

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

註意：<html>，<body>也可以作為標簽選擇器

類選擇器

這個選擇器很常用，也很重要。先說說什麼是類，這樣，還是打開百度首頁來講解

左邊我圈出來的class = 's_ipt'就是input的一個類屬性，右邊的css就是由類選擇器控制的，這樣就可以很好的找到此特有的標簽

註意：

類選擇器的語法，【.s_ipt】，註意前面的點
類選擇在同一個html文件可以有多個

ID選擇器

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

還是百度這個例子

我圈出來的這個 id=‘kw’ 就是id選擇器，右邊的#kw就是其id選擇器的css樣式

註意：

id選擇器的語法是【#kw】，註意前面的井號
id選擇器在同一個html文件里的屬性是唯一的，也就是說百度首頁的html文件里，html里的標簽只能由一個id叫kw的

通用選擇器

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

* { color: black; }

* 號相信稍微是個愛研究的人都見過，在windows系統里表示通配符，可以代替一切的字元，在IT它也是這麼個用法，可以表示一切字元，那麼這裡的自然表示所有的標簽

組合選擇器

組合選擇器就是比較高級的用法，有時候我們可能只運用上面的基本選擇器不是很方便，那麼就可以用組合選擇器

組合選擇器包含有：

高級選擇器

子集選擇器

後代選擇器

相鄰選擇器

子代選擇器

說這個之前，我希望您有這種思想，把html結構想成一顆大樹，樹上有很多的枝葉，每個枝里又有很多小枝，這樣的話你可能會更好理解下麵的，對以後的理論也更好理解

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

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

以上例子就是選擇div里的直系子代里的p標簽

後代選擇器

後臺選擇器和前面的子代選擇器有些類似，不過後代是包含子代在內的所有子子孫孫標簽

例：

div  p{
  font-size:15px;      
}

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

相鄰選擇器

相鄰選擇器有兩個，一個是前者（哥哥），一個後者（弟弟）

前者，用+：

div+p {
  color: red;
}

後者，用~：

div~p {
  color: red;
}

高級選擇器

高級選擇器里包含有並集，交集

並集，用逗號連接：

div,p,a{
  color:red;  
}

交集，直接連接，中間沒有空格：

交集用個完整的html來講解，可能大家才更好理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高級選擇器</title>
    <style>
        /*交集選擇器*/

        /*既是P標簽，類名稱又會text的元素字體變為紅色*/
        p.text{
            color: red;
        }
    </style>
</head>
<body>
    <!--交集選擇器-多個選擇器包含的元素-->
    <p>test1</p>
    <p class="text">test2</p>
    <p class="text">test3</p>
    <p>test4</p>  
 
</body>
</html>

測試結果：

屬性選擇器

屬性選擇器的特點就是可以很好的定位到人為定義的屬性，而不是已經有的屬性，比如給html文件加一個特殊標識，用屬性選擇器立馬就可以取到，併進行調整樣式

屬性選擇器如果細分的話，有兩種，一個是屬性選擇器，一個是屬性-值選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇</title>
    <style>
        /* 屬性選擇器 */
        [key]{
            color: red;
        }

        /* 屬性-值選擇器 */
        [key="test"]{
            color: red;
        }   
    

    </style>
</head>
<body>
    <p key="test">test1</p>    

</body>
</html>

註意：屬性選擇器的語法是 [……]

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

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

分組選擇器

當多個元素的樣式相同的時候，我們沒有必要重覆地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式

其實這個分組選擇就是前面高級選擇器里的並集選擇器，為什麼它又叫分組選擇器，就是因為很重要啦

h1,h2 {
  color: red;
}

偽類選擇器

偽類的意思就本來不存在的類，但是其又可以用

這個最常用的是對a和input標簽的選取

偽類選擇器有：

:link

:active

:visited

:hover

:focus

:link

表示沒有訪問的鏈接

a:link {
  color: blue;
}

:active

表示滑鼠點擊瞬間

a:active {
  color: black;
}

:visited

表示訪問過，點擊過的鏈接

a:visited {
  color: gray;
}

:hover

表示游標放上去但還未點擊的狀態

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

:focus

input輸入框獲取焦點時（即正處於在輸入框輸入內容時）樣式

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

以上最常用的就是：hover

偽元素選擇器

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

偽元素有：

first-leter

before

after

first-leter

用於為文本的首字母設置特殊樣式，說白了就是那種文章首字母大寫的效果

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

before

用於在元素的內容前面插入新內容

p:before {
  content: "*"; /*在所有p標簽的內容前面加上一個紅色的**/
  color: red;
}

after

用於在元素的內容後面插入新內容

p:after {
  content: "?"; /*在所有p標簽的內容後面加上一個藍色的?*/
  color: red;
}

各種選擇器的優先順序(權重)

學完以上的各種各樣的選擇器，那麼當然以上的各種選擇器是可以混用的，那麼混用的話，就會存在一個問題，假如各種混用的選擇器剛好都對同一個元素選中並設置不同的樣式，這種的話，到底會顯示什麼樣呢？

這個問題也當然不是問題，因為每個選擇器都有優先順序（又叫權重）的，優先順序高就選擇誰

各種選擇器的優先順序：

權重總結：

1.先看標簽是否被選中，如果選中，就數id選擇器和類選擇器，標簽選擇的權重，最後誰的權重大就顯示誰的，如果權重一樣大，後者覆蓋前者

2.如果沒有選中，權重為0，如果權重都是由父級繼承而來，且權重都是0，遵循就近原則，誰描述的近就顯示誰

3.！import權重最大

4.css多層嵌套，內層元素會繼承外層元素的css樣式