CSS選擇器

 

通常的選擇器

1. 標籤選擇器

以html標籤的名稱做爲標示符如

p {color:red;}

<p>這是一段文字</p>

顯示結果段落文字顯示爲紅色

1. ID、類 選擇器

使用html標籤的class值

p {color:red;}
p.blue{color:blue;}

 <p>這是一段紅色文字</p>
 <p class="blue">這是一段藍色文字</p>

1. 屬性選擇器

[attr^=val] ： 以val開頭

[attr$=val] ： 以val結尾

[attr*=val] ： 包含val

/*data-role以h開始的div*/
div[data-role^=h]{color:red;}
/*data-role以content結尾的div*/
div[data-role$=content]{color:blue;}
/*data-role包含foot的div*/
div[data-role^=header]{color:yellow;}

<div data-role="h-header">header</div>
<div data-role="c-content">content</div>
<div data-role="f-footer">header</div>

 

 

 

僞類、僞元素選擇器

以‘:’、’::’ 做爲開始

:first-child - 選擇子元素的第一項 ；

:last-child - 選擇子元素的最後項；

:nth-child(n) – 選擇第n個子元素

/*選中子元素只有一個的ul子元素*/
ul.test_only :only-child {background-color: red;}

/*第一個子元素*/
li:first-child {color: red;}
/*最後一個子元素*/
li:last-child {color: orange;}
/*偶數項子元素*/
li:nth-child(2n){background-color: #ccc;}
/*奇數項子元素*/
li:nth-child(2n+1){background-color: yellow;}
<ul class="test_only">
        <li>only li</li>
    </ul>
    <ul class="test_only">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>

:first-of-type - 選擇子元素爲某類型的的第一個子元素，p:first-of-type 選擇子元素爲p的第一個元素

:last-of-type – 選擇子元素爲某類型的的最後一個子元素

:nth-of-type(n) - 選擇子元素爲某類型的第n子元素

/*類型爲dt的第一個子元素*/
dt:first-of-type {background-color: #ccc;}
/*類型爲dt的最後一個子元素*/
dt:last-of-type {background-color: red;}
/*類型爲dd的第三個子元素*/
dd:nth-of-type(3) {background-color: orange;}
/*類型爲dd的倒數第三個子元素*/
dd:nth-last-of-type(3) {background-color: yellow;}


<dl>
    <dt>做者</dt>
    <dd>Leon</dd>
    <dt>出版社</dt>
    <dd>人民出版社</dd>
    <dt>出版時間</dt>
    <dd>2014-01-02</dd>
</dl>

僞元素選擇器:

/**
      * 僞元素選擇器
      * ::first-letter 選擇第一個字;
      * ::first-line 選擇第一行;
      * ::before{content:"";} 在選擇元素前面加入content內容
      * ::after{content:"";}; 在選擇元素後面加入content內容
      * ::selection 被選中的內容，如鼠標選擇的內容
      */
/*第一個字變大*/
div.oth-class p::first-letter{font-size:25px;font-weight:bold;}
div.oth-class p::first-line{color:red;}
/*前面加上before，after和before添加的內容沒法被鼠標選中*/
div.oth-class p::before{content:"before";}
div.oth-class p::after{content:"after";}
/*被鼠標選擇內容*/
div.oth-class p::selection{background-color: #ccc;color:orange;}



<div class="other">
     <p></p>
     <p>我是段落</p>

     <div><span>我是div，我有一個span</span></div>
     <div>我是div，沒有span</div>

 </div>

 <div class="oth-class" style="border:1px solid red;">
     <p>這是一段文字，<br>這段文字有兩行.</p>
 </div>

 

 

 

 

3. 選擇器的優先級

CSS對選擇器的優先級有一個計算方法

a=行內樣式

b=ID選擇器的數量

c=類、僞類和屬性選擇器的數量

d=標籤選擇器和僞元素選擇器的數量

a,b,c,c的權重依次爲1000,100,10,1

最終的權重值value=a*1000+b*100+c*10+d ,

CSS層疊：

相同屬性 -  優先級高覆蓋優先級低，優先級相同後面覆蓋簽名的。

不一樣屬性 -   疊加在一塊兒。

明確指定的屬性有限與父元素繼承來的屬性。