CSS 小結筆記之選擇器_ZenDei技術網路在線

Css選擇器主要分為以下幾類類選擇器 ID選擇器通配符選擇器標簽選擇器偽類選擇器複合選擇器 1、類選擇器：通過.classname 來選擇例如同一個標簽可以通過多個類名來指定多個樣式，但是若其中有重疊部分，則按權重值重疊，若在同一權重級別中，如都是內部樣式表中的，則按照上下關係，下麵的 ...

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

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

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

例如

 .color2 {
            color: rebeccapurple;
        }

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

例如：

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

 <p class="classtest1 classtest2">classtest</p>

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

 <p class="classtest2 classtest1">classtest</p>

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

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

例如

 #id1 {
            color: palegreen;
        }

 <p id="id1">idTest</p>

在網頁中一般來說一個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>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
        <li>li6</li>
    </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>span1</span>
        <p>p1</p>
        <span>span2</span>
        <span>span3</span>
        <p>p1</p>
        <span>span4</span>
        <span>span5</span>
        <span>span6</span>
    </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">div1Text</div>
    <div id="div2">div2Text</div>

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

6、複合選擇器

(1)交集選擇器

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

 p.pred {
            color: red;
        }

 <span class="pred">spanText </span>
 <p class="pred">Ptext</p>

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

(2)並集選擇器 element,element

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

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

<div>divtext</div>
<span>spantext</span>
<h3 class="cla1">h3text</h3>

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

(3)後代選擇器 element element

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

 div span {
            color: orange;
        }

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

<div>divText</div>
<span>SpanText</span>
<div>
    <span>divspanText</span>
</div>

只有 divspanText 文本變成橙色

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

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

 div>p {
            color: hotpink
        }

  <div>
        <p>divpText</p>
        <h1>
            <p>h1pText</p>
         </h1>
    </div>

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

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

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

 div+p {
            color: green;
        }

   <div>
     <p>divpText</p>
      <h1>
          <p> h1pText</p>
      </h1>
    </div>
    <p>ptext</p>

只有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">claText</div>
    <div class="div1">div1Text</div>
    <div class="div2">div2Text</div>
    <div class="div3">div3Text</div>
    <div class="1div1Text">1div1Text</div>
    <div class="1div1Text">2div1Text</div>
    <div class="1div1Text">3div1Text</div>
    <div class="1div">1divText</div>
    <div class="2div">2divText</div>
    <div class="3div">3divText</div>

(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">li1</li>