一，標籤選擇器

標籤選擇器定義：
  <style>
        p{
            color: red;
        }
        h1{
            color: blue;
        }
    </style>
使用：
<p>我是段落</p>
<h1>我是標題</h1>

1. 根據指定的標籤名稱, 在當前介面中找到所有該名稱的標籤, 然後設定屬性
2. 標籤選擇器選中的是當前介面中所有的標籤, 而不能單獨選中某一個標籤
3. 標籤選擇器無論標籤藏得多深都能選中
4. 只要是HTML中的標籤就可以作為標籤選擇器(h/a/img/ul/ol/dl/input....)

二，id選擇器和class選擇器

選擇器的定義
 <style>
//id選擇器定義
        #identity1{
            color: red;
        }
//class選擇器定義
          .pp{
            color: red;
        }
 </style>


選擇器的使用：
<p id="identity1">按時上下班</p>
<p class="pp">按時上下班</p>
 

1，id選擇器

1. id選擇器是根據指定的id名稱找到對應的標籤, 然後設定屬性
2. 每個HTML標籤都有一個屬性叫做id, 也就是說每個標籤都可以設定id
3. 在同一個介面中id的名稱是不可以重複的
4. 在編寫id選擇器時一定要在id名稱前面加上#
5. id的名稱是有一定的規範的
   1. id的名稱只能由字母/數字/下劃線
   2. a-z 0-9 _
   3. id名稱不能以數字開頭
   4. id名稱不能是HTML標籤的名稱
   5. 不能是a h1 img input ...
6. 在企業開發中一般情況下如果僅僅是為了設定樣式, 我們不會使用id ,因為在前端開發中id是留給js使用的

2，class選擇器：

1. class選擇器指根據指定的類名稱找到對應的標籤, 然後設定屬性
2. 每個HTML標籤都有一個屬性叫做class, 也就是說每個標籤都可以設定類名
3. 在同一個介面中class的名稱是可以重複的
4. 在編寫class選擇器時一定要在class名稱前面加上.
5. 類名的命名規範和id名稱的命名規範一樣
6. 類名就是專門用來給CSS設定樣式的
7. 在HTML中每個標籤可以同時繫結多個類名，格式如下
   1. 正確的寫法:<標籤名稱 class="類名1 類名2 ...">
   2. 錯誤的寫法:<p class="para1" class="para2">

3，id選擇器和class選擇器的區別

1. id相當於人的身份證不可以重複，class相當於人的名稱可以重複
2. 一個HTML標籤只能繫結一個id名稱，一個HTML標籤可以繫結多個class名稱
3. id選擇器是以#開頭，class選擇器是以.開頭
4. 應用場合：id一般情況下是給js使用的, 所以除非特殊情況, 否則不要使用id去設定樣式，一般情況下在企業開發中要注重冗餘程式碼的抽取, 可以將一些公共的程式碼抽取到一個類選擇器中, 然後讓標籤和這個類選擇器繫結即可

三，後代選擇器和子元素選擇器

//標籤的定義
 <style>

//後代選擇器的定義
       div ul li p{
            color: red;
        }
//子元素選擇器的定義
        div>ul>li>p{
            color: purple;
        }
</style>

//後代選擇器的使用
<div >
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <div >
            <p>我是段落</p>
            </div >
        </li>

    </ul>
</div>

//子選擇器的使用
<div id="identity">
    <p>我是段落</p>
    <p>我是段落</p>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

1，後代選擇器

1. 後代選擇器就是找到指定標籤的所有特定的後代標籤, 設定屬性
2. 後代選擇器必須用空格隔開
3. 後代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標籤中的都是後代
4. 後代選擇器不僅僅可以使用標籤名稱, 還可以使用其它選擇器
5. 後代選擇器可以通過空格一直延續下去

2，子選擇器 

1. 子選擇器 就是找到指定標籤中所有特定的直接子元素, 然後設定屬性
2. 子元素選擇器只會查詢兒子, 不會查詢其他被巢狀的標籤
3. 子元素選擇器之間需要用>符號連線, 並且不能有空格
4. 子元素選擇器不僅僅可以使用標籤名稱, 還可以使用其它選擇器
5. 子元素選擇器可以通過>符號一直延續下去

3，後代選擇器和子選擇器的區別

 

1. 後代選擇器使用空格作為連線符號，子元素選擇器使用>作為連線符號
2. 後代選擇器會選中指定標籤中, 所有的特定後代標籤, 也就是會選中兒子/孫子..., 只要是被放到指定標籤中的特定標籤都會被選，子元素選擇器只會選中指定標籤中, 所有的特定的直接標籤, 也就是隻會選中特定的兒子標籤
3. 實際應用：如果想選中指定標籤中的所有特定的標籤, 那麼就使用後代選擇器，如果只想選中指定標籤中的所有特定兒子標籤, 那麼就使用子元素選擇器

4，後代選擇器和子選擇器的相同點：

1. 後代選擇器和子元素選擇器都可以使用標籤名稱/id名稱/class名稱來作為選擇器
2. 後代選擇器和子元素選擇器都可以通過各自的連線符號一直延續下去，選擇器1>選擇器2>選擇器3>選擇器4{}

四，交集選擇器和並集選擇器

//交集選擇器和並集選擇器的定義
 <style>
    //交集選擇器
    .para1#identity{
            color: blue;
        }
    //並集選擇器
     .ht,.para{
            color: red;
        }
 </style>

//交集選擇器的使用
<p class="para1" id="identity">我是段落</p>

//並集選擇器的使用
<h1 class="ht">我是標題</h1>
<p class="para">我是段落</p>

1，交集選擇器

1. 交集選擇器就是給所有選擇器選中的標籤中, 相交的那部分標籤設定屬性
2. 選擇器和選擇器之間沒有任何的連線符號
3. 選擇器可以使用標籤名稱/id名稱/class名稱
4. 交集選擇器僅僅作為了解, 企業開發中用的並不多

2，並集選擇器

1. 並集選擇器就是給所有選擇器選中的標籤設定屬性
2. 並集選擇器必須使用,來連線
3. 選擇器可以使用標籤名稱/id名稱/class名稱

五，兄弟選擇器

//兄弟選擇器的定義
<style>
    //相鄰兄弟選擇器的定義
        h1+p{
            color: red;
        }

    //通用兄弟選擇器的定義
        h1~p{
            color: green;
        }
    </style>

//相鄰兄弟選擇器的使用
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>

//通用兄弟選擇器的使用
<h1>我是標題</h1>
<p>我是段落1</p>
<p>我是段落2</p>

1，相鄰兄弟選擇器

1. 相鄰兄弟選擇器，就是給指定選擇器後面緊跟的那個選擇器選中的標籤設定屬性
2. 相鄰兄弟選擇器必須通過+連線
3. 相鄰兄弟選擇器只能選中緊跟其後的那個標籤, 不能選中被隔開的標籤

2，通用兄弟選擇器

1. 通用兄弟選擇器，就是給指定選擇器後面的所有選擇器選中的所有標籤設定屬性
2.  通用兄弟選擇器必須用~連線
3. 通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的所有標籤, 無論有沒有被隔開都可以選中

六，序選擇器

//序選擇器的定義
   <style>

        p:first-child{
            color: red;
        }
  </style>

//序選擇器的使用
<p>我是專案</p>

CSS3中新增的選擇器最具代表性的就是序選擇器

1.同級別的第幾個

• 注意點: 不區分型別
• :first-child 選中同級別中的第一個標籤
• :last-child 選中同級別中的最後一個標籤
• :nth-child(n) 選中同級別中的第n個標籤
• :nth-last-child(n) 選中同級別中的倒數第n個標籤
• :only-child 選中父元素中唯一的標籤
• :nth-child(odd) 選中同級別中的所有奇數
• :nth-child(even) 選中同級別中的所有偶數
• :nth-child(xn+y)：x和y是使用者自定義的, 而n是一個計數器, 從0開始遞增

2.同類型的第幾個

• :first-of-type 選中同級別中同類型的第一個標籤
• :last-of-type 選中同級別中同類型的最後一個標籤
• :nth-of-type(n) 選中同級別中同類型的第n個標籤
• :nth-last-of-type(n) 選中同級別中同類型的倒數第n個標籤
• :only-of-type 選中父元素中唯一型別的某個標籤

七，屬性選擇器

//屬性選擇器的定義
  <style>

        p[id]{
            color: red;
        }

        p[class=cc]{
            color: blue;
        }
  </style>

//屬性選擇器的使用
    <p id="identity1">我是段落1</p>
    <p id="">我是測試1</p>
    <p class="cc">我是段落3</p>

1. 屬性選擇器，就是找到有指定屬性, 並且屬性的取值等於value的標籤, 然後設定屬性
2. 最常見的應用場景, 就是用於區分input屬性：
   1. 定義：input[type=password]{}
   2. 使用<input type="text" name="" id="">；<input type="password" name="" id="">
3.  屬性選擇器的特殊篩選

   1. //屬性選擇器的定義
       <style>
       //CSS3中image標籤的alt屬性，以abc開頭
              img[alt^=abc]{
                  color: red;
              }
              
               //CSS2中
              img[alt|=abc]{
                  color: red;
              }
      
         //CSS3中image標籤的alt屬性，以abc結尾
              img[alt$=abc]{
                  color: blue;
              }
      
      
          //CSS3中image標籤的alt屬性，包含abc
              img[alt*=abc]{
                  color: red;
              }
              //CSS2中
              img[alt~=abc]{
                  color: red;
              }
      
          </style>
      
      //屬性選擇器的使用
      <img src="" alt="abcwwwmmm">
      <img src="" alt="wwwmmmabc">
      <img src="" alt="wwwabcmmm">
      <img src="" alt="www-abc-mmm">
      <img src="" alt="www abc mmm">
      <img src="" alt="qq">

       

   2. 屬性的取值是以什麼開頭的
      1. [attribute|=value] CSS2
      2. [attribute^=value] CSS3
      3. 兩者之間的區別:CSS2中的只能找到value開頭,並且value是被-和其它內容隔開的，CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開
   3. 屬性的取值是以什麼結尾的
      1. [attribute$=value] CSS3
   4. 屬性的取值是否包含某個特定的值得
      1. [attribute~=value] CSS2
      2. [attribute*=value] CSS3
      3. 兩者之間的區別:CSS2中的只能找到獨立的單詞, 也就是包含value,並且value是被空格隔開的，CSS3中的只要包含value就可以找到

八，萬用字元選擇器

//萬用字元選擇器的定義和使用
   <style>
      
        *{
            color: red;
        }
    </style>

<h1>我是標題</h1>

• 萬用字元選擇器是設定介面上所有的標籤的屬性,
• 所以在設定之前會遍歷所有的標籤, 如果當前介面上的標籤比較多, 那麼效能就會比較差, 所以在企業開發中一般不會使用萬用字元選擇器