摘要：例如對于上面的偽元素選擇器，想要改變第一個字母的顏色大小則需要增加一個標簽層疊樣式表英文全稱是一種用來表現標準通用標記語言的一個應用或標準通用標記語言的一個子集等文件樣式的計算機語言。

Css選擇器主要分為以下幾類

• 類選擇器
• ID選擇器
• 通配符選擇器
• 標簽選擇器
• 偽類選擇器
• 復合選擇器

1、類選擇器：通過.classname 來選擇

例如

 .color2 {
            color: rebeccapurple;
        }

同一個標簽可以通過多個類名來指定多個樣式，但是若其中有重疊部分，則按權重值重疊，若在同一權重級別中，如都是內部樣式表中的，則按照上下關系，下面的覆蓋上面的。

例如：

  .classtest1 {
            font-size: 25px;
            color: blue;
        }
        
  .classtest2 {
            color: red;
        }

 <p class="classtest1 classtest2">classtestp>

則p標簽內容顯示紅色，樣式覆蓋只與樣式定義的順序有關，與指定的循序無關，如果將上述的p標簽中的class順序調換，則結果不會改變。例如

 <p class="classtest2 classtest1">classtestp>

顯示結果與上面的顯示結果一致。

2、Id選擇器通過#id來選擇

例如

 #id1 {
            color: palegreen;
        }

 <p id="id1">idTestp>

在網頁中一般來說一個id對應一個元素，多個元素使用同一id值雖然不會報錯，并且可以使用同一樣式，但是用js進行操作時會出現問題。

3、通配符選擇器 * 

通配符選擇器是選擇所有元素。

*{
background-color:yellow;
}

4、標簽選擇器element 

例如 為所有的div設置樣式：

 div {
            color: blue;
            font-size: 20px
        }

5、偽類選擇器

（a）連接偽類選擇器  :link |:visited |:hover |:active

　    a:link {/* 鏈接的顏色 */
            color: blue;
        }
        
        a:visited {/* 已訪問過的顏色 */
            color: green;
        }
        
        a:hover {/* 鼠標放上去的顏色 */
            color: red;
        }
        
        a:active {/*點擊瞬間的顏色 */
 　　　　　　color: yellow; 
　　　}

<a href="#">a鏈接a>

連接偽類選擇器的順序盡量不要改變，因為hover放在link和visited后才有效，active再hover后才有效

(b)結構偽類選擇器 

• :first-child 選取第一個元素
• :last-child 選取最后一個元素
• :nth-chlid(n) 選取第n個元素（n從1開始，n小于等于0時沒有匹配項）
• :nth-last-child

        li:first-child {
            color: blue;
        }
        
        li:last-child {
            color: green;
        }
        
        li:nth-child(5) {
            color: red;
        }
        
        li:nth-last-child(5) {
            color: orange;
        }
        /* even、2n指定偶數項 odd、2n+1 奇數 */
        
        li:nth-child(odd) {
            font-size: 25px;
        }
        
        li:nth-last-child(2n+1) {
            font-size: 35px;
        }

 <ul>
        <li>li1li>
        <li>li2li>
        <li>li3li>
        <li>li4li>
        <li>li5li>
        <li>li6li>
    ul>

結果如下圖所示

 上述的選擇器是將父元素中所有的元素進行排序來計算n的，所以當目標元素中穿插了其他元素，此種方法會出現問題。需要用到以下選擇器

• :first-of-type            同種類型元素的第一個
• :last-of-type            同種類型元素的最后一個
• :only-of-type           同種類型元素的多帶帶的一個  
• :nth-of-type(n)        同種類型元素的第n個
• nth-last-of-type(n)  同種類型元素的倒數n個

span:nth-of-type(even) {
            color: blue;
        }

 <div>
        <span>span1span>
        <p>p1p>
        <span>span2span>
        <span>span3span>
        <p>p1p>
        <span>span4span>
        <span>span5span>
        <span>span6span>
    div>

這時用nth-of-type(n)沒有問題而使用 nth-child(n)會出現問題，可以自己試一下。

(c)目標選擇器 :target

只對當前目標有效

 :target {
            color: blue;
            font-size: 30px;
        }

    <a href="#div1">div1的鏈接a>
    <a href="#div2">div2的鏈接a>
    <div id="div1">div1Textdiv>
    <div id="div2">div2Textdiv>

點擊div1的鏈接則div1處于活動狀態，此時div1的樣式改變

6、復合選擇器

 (1)交集選擇器

交集選擇器是標簽選擇器+類選擇器（中間沒有空格！）。

 p.pred {
            color: red;
        }

 <span class="pred">spanText span>
 <p class="pred">Ptextp>

對于上面的例子中，只有p標簽改變了顏色

(2)并集選擇器 element,element 

當多個標簽需要設置同種樣式時，使用并集選擇器,并集選擇器用逗號隔開，如：

 div,
 span,
 .cla1{
            color:pink;
        }

<div>divtextdiv>
<span>spantextspan>
<h3 class="cla1">h3texth3>

上面三中結果顯示樣式一致。

(3)后代選擇器 element element 

后代選擇器用空格隔開，例如

 div span {
            color: orange;
        }

指定div下面的span標簽是橙色

<div>divTextdiv>
<span>SpanTextspan>
<div>
    <span>divspanTextspan>
div>

只有 divspanText 文本變成橙色

(4)子元素選擇器 element>element

 后代選擇器只要是滿足前一個標簽內的子孫元素都可以，而子元素選擇器只有子元素才可以。

 div>p {
            color: hotpink
        }

  <div>
        <p>divpTextp>
        <h1>
            <p>h1pTextp>
         h1>
    div>

只有divptext顏色改變，而h1ptext顏色不變。

(5) 下一級選擇器 element+element

選擇緊接著在上一個元素之后的元素

 div+p {
            color: green;
        }

   <div>
     <p>divpTextp>
      <h1>
          <p> h1pTextp>
      h1>
    div>
    <p>ptextp> 

只有ptext顏色改變。

 (6)屬性選擇器 E[attr] 

具體用法在下例給出

    div[class=cla] {
            color: pink;
        }
        
        div[class^=div] {
            /*以div開頭的class*/
            color: blue;
            font-size: 15px;
        }
        
        div[class$=div] {
            /*以div結尾的class*/
            color: orange;
            font-size: 15px;
        }
        
        div[class*=Text] {
            /*包含Text的class*/
            color: green;
            font-size: 15px;
        }

    <div class="cla">claTextdiv>
    <div class="div1">div1Textdiv>
    <div class="div2">div2Textdiv>
    <div class="div3">div3Textdiv>
    <div class="1div1Text">1div1Textdiv>
    <div class="1div1Text">2div1Textdiv>
    <div class="1div1Text">3div1Textdiv>
    <div class="1div">1divTextdiv>
    <div class="2div">2divTextdiv>
    <div class="3div">3divTextdiv>

(7)偽元素選擇器 

• ::first-letter 首字母
• ::first-line  首行
• ::selection 選中的元素
• ::brfore     在元素開始添加內容與content一起使用
• ::after       在元素結尾添加內容與content一起使用

      p::first-letter {
            color: red;
            font-size: 30px;
        }
        
        p::first-line {
            color: palegreen;
            font-size: 25px;
        }
        
        p::selection {
            color: blue;
            font-size: 25px;
        }
        
        P::after {
            content: -結尾
        }
        
        p::before {
            content: 開頭：;
        }

 <p>層疊樣式表(英文全稱：Cascading Style Sheets) 是一種用來表現HTML（標準通用標記語言的一個應用） 或XML（標準通用標記語言的一個子集） 等文件樣式的計算機語言。 CSS不僅可以靜態地修飾網頁， 還可以配合各種腳本語言動態地對網頁各元素進行格式化。
    p>

偽元素與偽類選擇器的區別：

首先，在Css3標準中偽元素選擇器使用兩個冒號::，而偽類選擇器使用一個冒號‘ : ’。再就是如果不使用偽元素選擇器，想要達成相同的效果需要多添加元素才能實現，而不使用為例選擇器想要達成相同的效果需要增加一個類來實現。

例如對于上面的偽元素選擇器，想要改變第一個字母的顏色大小則需要增加一個標簽：

        span {
            color: red;
            font-size: 30px;
        }

 <p><span>層span>疊樣式表(英文全稱：Cascading Style Sheets) 是一種用來表現HTML（標準通用標記語言的一個應用） 或XML（標準通用標記語言的一個子集） 等文件樣式的計算機語言。 CSS不僅可以靜態地修飾網頁， 還可以配合各種腳本語言動態地對網頁各元素進行格式化。
    p>

而不使用偽類選擇器想要改變第一個元素的樣式需要增加一個類，例如

 .first {
            color: blue;
        }

<li class="first">li1li>