CSS選擇器詳細介紹-css教學-PHP中文網

首頁

web前端

css教學

CSS選擇器詳細介紹

高洛峰

Feb 17, 2017 pm 01:15 PM

css 選擇器

CSS3 基本選擇器

CSS選擇器詳細介紹

為了更好的說明問題，先創建一個簡單的DOM結構，如下：

<div> 
    <ul> 
       <li>1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
       <li>5</li> 
       <li>6</li> 
       <li>7</li> 
       <li>8</li> 
       <li>9</li> 
       <li>10</li> 
   </ul> 
</div>

一、通配符選擇器（＊）

一、通配符選擇器（＊）
來選擇所有配符選擇器是用通配符選擇器是用通配符選擇，，也可以選擇某個元素下的所有元素。如：

程式碼如下:
*{ marigin: 0; padding: 0; }

上面程式碼大家在reset樣式檔案中看到的肯定不少，他所表示的是，所有元素的margin和padding都設定為0 ，另外一種就是選擇某個元素下的所有元素：

代碼如下:

.demo * {border:1px solid blue;}

二、元素選擇器(E)

元素選擇器，是css選擇器中最常見且最基本的選擇器。元素選擇器其實就是文件的元素，如html,body,p,div等等，像我們這個demo：中元素包含了div,ul,li等。

程式碼如下:

li {background-color: grey;color: orange;}

三、類別選擇器（.className）
類別選擇器是以一獨立於文檔元素的方式指定樣式，使用類別選擇器之前需要在html元素上定義類別名，換句話說需要保證類別名稱在html標記中存在，這樣才能選擇類別，如：

共中「active,important, items」就是我們以類別為li加上一個類別名，以便類別選擇器能正常運作，以便更好的將類別選擇器的樣式與元素相關聯。

.important {font-weight: bold; color: yellow;}
上面程式碼表示是給有important類別名稱的元素加上一個「字體為粗體，顏色為黃色」的樣式;

類選擇器還有可以具備多類名，上面我們也看到了，我們li元素中同時有兩個或多少類名，其中他們以空格隔開，那麼選擇器也可以使用多類連接在一起，如：

代碼如下:

.important {font-weight: bold;}
.active {color: green;background: lime;}

.items {color: #fff;background: #000;}

.important.items { background:#ccc;}

.first.last {color: blue;}

正如上面的程式碼所示，".important.items"這個選擇器只對元素中同時包含了"important"和"items "兩個類別才能運作. 所有瀏覽器都支援類別選擇器，但多類別選擇器（.className1.className2）不被ie6支援。

五、後代選擇器（ＥＦ）

後代選擇器也被稱為包含選擇器,所起作用就是可以選擇某元素的後代元素，比如說:E F，前面E為祖先元素，Ｆ為後代元素，所表達的意思就是選擇了Ｅ元素的所有後代Ｆ元素，請注意他們之間需要一個空格隔開。這裡Ｆ不管是E元素的子元素或是孫元素或是更深層的關係，都會被選中，換句話說，不論Ｆ在Ｅ中有多少層關係，都會被選中：

.demo li { color: blue;}