一般沒有系統的學習過，只是在網上看一些片斷教程的人。見到最多的可能也就是：

• 元素選擇符（例如：body 、a 、li ）
• ID選擇符（例如：#head、#body、#foot）
• 類選擇符（例如：.red、.item、.content）

今天我們把所有的選擇符統統拿出來說個遍。

1)通配符選擇符

　　所謂通配符其實只是一個星號而已，但這么一個簡單的星號作用卻是很強大的。通配符一般用來對頁面所有元素應用樣式。

　　例如：

　　　　

/*將頁面中所有元素的內邊距和外邊距設置為0*/
*
{
????margin:0;
????padding:0;
}

?

在有些情況下，可以對特定元素的所有后代元素(后代元素其實就類似是子元素<p>pppp<strong>strong</strong></p>,strong就是P的后代元素)應用樣式。例如，將頁面中h1標簽所包含的所有后代元素的字體設置為黃色，例如：

?

代碼 <style?type="text/css"> *{font-size:14px;}
h1{color:blue;}/*將h1下面所有的內容設為藍色*/
h1?*{color:yellow;}/*將h1下面所有的子標記中的內容設為黃色*/
h1?p?*{color:red;}/*將h1下面P標記下面的所有內容設為紅色*/
</style>
<h1>h1
<span>h1里面包含個span</span>
<p>h1里面的P<strong>三級strong</strong></p>
</h1>

?

效果如圖：

最后關于通配符還有一點想說的就是，效率的問題。通配符把所有標簽都要初始化一遍，瀏覽器的渲染消耗一定的資源。但是我在想，對于這點資源，除非是那種對性能要求極高，否則我認為沒必要太刻意在乎，畢竟還是很方便嗎！

2）類選擇符

　　通配符與標簽作為選擇符確實很強大，也很好用，但涉及的范圍太廣泛。如果希望同一個標簽在不同位置顯示不同的樣式，那就需要改變選擇符的使用方式，否則存在的弊端太多，這個時候就應該考慮換個方式去定義CSs樣式。

　　類這個概念可能我們大家在C#編程中都接觸過，這里提的類選擇器其實跟C#中的類是差不多的概念，目的就是體現復用性。減少相同的樣式定義多次。

　　來看例子：

　　

<style?type="text/css">
div
{
????font-size:14px;
????color:#ff0000;
????text-decoration:underline;
}
</style>

<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>

?

?

這邊我讓所有div標簽下的文字14px大小帶下劃線紅色文字。

現在想一下如何讓第三個DIV變為18px的字體。

看例子：

　　

<style?type="text/css">
.div3
{
????font-size:18px;
}
</style>
<div>div1</div>
<div>div2</div>
<div?class="div3">div3</div>
<div>div4</div>

?

類選擇器在CSS中必須以“.”作為前綴，后面緊跟一個定義的類名。這樣只要類是“div3”的DIV都以18PX字體顯示從而達到了復用的效果了。

3)ID選擇符

　　ID選擇符的形式與類選擇符極其相近，只不過類選擇符是以點(.) 為前綴的，而ID選擇符是以井號(#)為前綴。而兩個選擇符的用法也很相似。但一個頁面中使用ID選擇符建議不要出現同名的ID，因為javascript操作的時候，容易引起操作判斷錯誤。

　　示例：

　　　　

<style?type="text/css">
#testdiv{color:red;font-size:15px;}
</style>
<div>div</div>
<div?id="testdiv">帶ID的DIV</div>

是不是與上面的類選擇符很相似呢。這個就介紹到這邊！

4)包含選擇符

　　 包含選擇符很多人稱它為派生選擇符或者后代選擇符，因為該選擇符類型是作用于某個元素中的子元素的。例如，我們需要為DIV標簽里面的SPAN定義樣式：可以這樣做：

　　

<style?type="text/css">
div?span{font-size:30px;}
</style>
<div>
????div
????<span>span</span>
</div>
<span>span2</span>

效果如圖：div里面的span樣式已經改變了。而下面的span則沒有任何變化 ，因為定義的樣式不起作用。

還要說一下，包含選擇符不只限用于兩層，可以多層嵌套。

如下面效果

<style?type="text/css">
div?span?p{font-size:30px;}
</style>
<div>
????div
????<span>span<p>儒通互聯</p></span>
</div>

對了其實"div span p"跟 div p效果在這邊是一樣的。但兩者是有區別的，前者是對div下面的span下面的P設置 樣式 而后者只是 對div下面的p設置標記。

?

?

轉載于:https://www.cnblogs.com/shihao/archive/2010/03/26/1697328.html

總結

以上是生活随笔為你收集整理的[你必须知道的css系列]第一回：丰富的利器：CSS选择符之通配符、类选择符、包含选择符、ID选择符...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。