CSS知識點：選擇符

1、選擇符的種類

1）通配選擇符

它用來給頁面全部的元素設置樣式

*{margin:0;padding:0;}。可是實際當中不建議這麼用，頁面中用到了哪些樣式，就統一設置樣式，由於*影響性能。也能夠給某元素的全部的後代元素應用樣式：p *{color:red;}

2）標籤選擇符

顧名思義，經過標籤來限定樣式做用域

div{padding:5px;}

3）類選擇符

和麪向對象中的類有着相似的功能，須要的時候調用便可，達到重用的目的。將樣式定義成一個類，須要使用的地方調用便可。

.myClass{font-size:24px;}

<p>普通文字<p>

<p class="myClass">自定義樣式</p>

4）ID選擇器

經過#ID來精肯定位頁面元素的屬性

#trapper{padding:10px;font-size:26px;}

<div id="trapper">

<ul>

<li>1</li>

<li>2</li>

</ul>

</div>

5）包含選擇符

 直接上實例

div strong{font-size:24px;text-decoration:underline;}

<div>

　　<p><strong>我是div中的p標籤下的strong內容（」孫子」）</strong></p>

　　<strong>我是div中的strong內容（」孩子」）</strong>

</div>

可見，包含選擇會將某元素下的全部包含元素都設置樣式。無論層級有多深。

6）子選擇符

和上邊的區別，你們看出來了嗎？

 div>strong{font-size:24px;text-decoration:underline;}

<div>

　　<p><strong>我是div中的p標籤下的strong內容（」孫子」）</strong></p>

　　<strong>我是div中的strong內容（」孩子」）</strong>

</div>

 

7）相鄰選擇符

 控制相鄰的元素樣式

div+strong{font-size:24px;text-decoration:underline;}

<div>

　　<strong>我是p的鄰居</strong>

　　<p><strong>我是div中的p標籤下的strong內容（」孫子」）</strong></p>

　　<div>div中的div</div>

　　<strong>我是div中的strong內容（」孩子」），並且我也是p的鄰居</strong>

　　<strong>我顯示有下滑線嗎</strong>

</div>

要是p+strong+strong呢？strong+strong(能夠並排多個strong看看效果)？css很強大！！

8）屬性選擇符

 四種方式

E[attr] 具備attr屬性的全部HTML標籤 ，如div[class]表示具備class屬性的全部div

E[attr="value"] 具備attr屬性且屬性值爲value的標籤，如input[type="text"]{border:2px;}

E[attr~="value"] 具備attr屬性，且有多個空格隔開的字段，其中一個字段爲value的元素。

E[attr|="value"] 具備attr標籤，且必須以value值開始及使用-分隔的元素

9）混合選擇符

 如p.className p#id等等

2、CSS選擇符優先級計算

整體上按照就近原則應用樣式。通常計算以下

行內樣式：1000

ID選擇符：0100

類選擇符：0010

標籤選擇符：0001

例如：body #wrapper p {...}，那麼它的優先級指數就是 1+100+1=102，而body div #wrapper p {...}的優先級指數就是 1+ 1 +100 + 1 =103

但須要注意一個關鍵字!important，除了IE6,他的css優先級最高。

#box {
     color:red !important;
     color:blue;
 }

這樣，對於IE7+顯示字體顏色爲紅色，不會被藍色覆蓋掉。IE6顯示爲藍色。

 本文參考 CSS那些事兒，你們想看詳細信息，請看這本書