CSS彙總之CSS選擇器

要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就須要用到CSS選擇器。

 1、通配符選擇器

             語法：*{ }

     說明：通配符選擇器能夠選擇頁面上全部的html標籤（包括body，html標籤）

     用途：練習階段清除頁面全部標籤的默認樣式（使用通配符清除默認樣式僅在練習階段使用）

 <style>
      * {
        margin: 0;
        padding: 0;
        color: red;
        background: lightblue;
      }
 </style> 
 <div>這是一個div</div>
 <p>這是一個p標籤</p>

效果：body區域的背景色渲染成了lightblue，div和p標籤的字體顏色渲染成了紅色

2、標籤選擇器

語法：標籤名 {}

說明：經過html標籤名選擇標籤設置樣式，w3c也稱做元素選擇器或者類型選擇器

用途：經常使用在某些標籤的特殊樣式 好比a、ul、ol等  

 

 <style>
      ul {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: red;
      }
 </style>
 
<ul>
      <li><a href="">連接</a></li>
      <li><a href="">連接</a></li>
      <li><a href="">連接</a></li>
</ul> 　

 

效果：li的小圓點去掉和a標籤的默認顏色改變

 

 3、id選擇器

語法：#id名:{}   (#號和id名緊挨着)

說明：經過標籤的id名選擇標籤設置樣式, 整個頁面中只能有惟一一個id名

 　　　　用途：id優先級較高，有時候用來層疊掉某些類樣式

 <style>
      #dv {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        color: orange;
      }
  </style>  
  <div id="dv">
      這是一個div
  </div>

效果：經過id選擇器選擇標籤設置樣式

4、類選擇器

語法：.類名 {}   (由.和類名組成，.緊跟在類名前邊，與id選擇器相似)

說明：經過標籤的類名選擇到元素

用途：開發中最經常使用的選擇器，不一樣的標籤設置了同一個類名時，能夠擁有相同的樣式，固然一個標籤也能夠擁有多個類名。

 <style>
      .common {
        font-size: 18px;
        color: orange;
      }
      .dv1 {
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }
      .dv2 {
        border: 1px solid #ccc;
        width: 200px;
        height: 200px;
      }
 </style>
 <div class="dv1 common">
      這是div1
 </div>
 <div class="dv2 common">
      這是div2
 </div>

效果：兩個div都擁有兩個樣式，且都引用了common樣式，這時候div會把引用的類樣式都渲染出來，咱們一般把相同的樣式提取出來

 5、屬性選擇器

                用法:[屬性名] {}  （[]方括號內部直接寫標籤的屬性名便可）

說明：但願選擇有某個屬性的元素，可使用這種選擇器，固然屬性選擇器還有其餘用法。

<style>
      [class] {
        width: 200px;
        height: 200px;
        border: 1px solid black;
      }
</style> 
  <div class="dv1">
      這是div1
  </div>
  <div class="dv2">
      這是div2
  </div>

效果：具備class屬性的標籤都會渲染出相同的樣式

 

標籤選擇器的其餘用法（圖表參考w3c）詳細用法參考W3C：

選擇器	描述
[attribute]	用於選取帶有指定屬性的元素
[attribute=value]	用於選取帶有指定屬性和值的元素
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素
[attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞
[attribute^=value]	匹配屬性值以指定值開頭的每一個元素
[attribute$=value]	匹配屬性值以指定值結尾的每一個元素
[attribute*=value]	匹配屬性值中包含指定值的每一個元素

 6、後代選擇器

語法：每一層選擇器用空格隔開

說明：後代選擇器能夠選擇做爲某元素後代的元素，無論後代標籤再結構中嵌套多深，都會選擇到

/*選中div後代中的p*/
div p {    
    color: red;
}    

後代選擇器不但能夠選中兒子，還能夠選中孫子等全部的後代元素。
/*會選中box中的h3*/
.box h3 {
    font-size: 50px;
}
<div class="box">
    <div>
        <div>
            <div>
                <h3>我是多層嵌套的h3</h3>
            </div>
        </div>
    </div>
</div>

7、子代選擇器

語法：父元素選擇器 > 子元素選擇器 { }

　　說明：選擇標籤的直接子元素，沒法選擇孫子及後代元素 

 <style>
      h1 > strong {
        color: red;
     }
 </style>
 <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
 <h1>
      This is <em>really <strong>very</strong></em> important.
  </h1>

 效果：第一個h1的strong會變顏色，第二個h1下的strong不會變顏色

 

子代選擇器與後代選擇器的區別：子代選擇器只能選擇直接子元素，選擇範圍較小。後代選擇器能夠選擇子孫後代元素，選擇範圍較大。

 

 8、相鄰兄弟選擇器

 語法：元素選擇器 + 元素選擇器 {}   （二者爲相鄰元素，且有相同父元素）

 說明：可選擇緊接在另外一元素後的元素，且兩者有相同父元素 

 <style>
      .box {
        height: 100px;
        width: 100px;
        background-color: red;
      }
/*h1和div 都會有20px的margin-top值 */
      h1,
      div {
        margin-top: 20px;
      }
 </style>
 <h1>這裏是標題</h1>
 <div class="box">box中的內容</div>

9、交集選擇器

說明：同時選中兩個選擇器都具備的元素

語法：連續書寫選擇器，不要添加任何空格（和後代選擇器進行區分） 

 <style>
      p.para {
        font-size: 50px;
        color: red;
      }
 </style> 
 <p class="para">p</p>
 <p>我是p <span class="para">特殊</span></p> 

效果：會給第一個p標籤中的內容添加樣式，第二個p中的標籤和內容都不會添加樣式

交集選擇器能夠連續交集（選擇器能夠書寫多個）如:  p.para.fs{}  能被選中的元素具備如下特色：是p標籤且含有para 和 fs類樣式

 10、並集選擇器　　

　　語法：逗號隔開每個選擇器

說明：同時設置多個選擇器相同的樣式

<style>
div, h3, p {
    font-size: 50px;
    color: red;
}
</style>
<div>div</div>
<h3>h3</h3>
<p>p標籤</p>

效果：div,h3和p標籤都會設置上樣式，並集選擇器中的單個選擇器也可使用類選擇器，id選擇器，屬性選擇器等。

 11、僞類選擇器

說明：CSS 僞類用於向某些選擇器添加特殊的效果，工做中用的不太多

用法：詳見W3C，僞類選擇器

12、僞元素選擇器

 說明：CSS 僞元素用於向某些選擇器設置特殊效果，before和after經常使用

用法：僞元素選擇器 

總結：以上內容幾乎涵蓋工做當中的全部用法，其中經常使用的有類選擇器、標籤選擇器、id選擇器、屬性選擇器、僞元素選擇器的before和after，有些不經常使用的沒有給出具體效果，能夠根據提供的代碼，自行實驗