apple 模拟器

書名： HTML5 移動Web開發從入門到精通（微課精編版）
作者名：前端科技
本章字數： 1047字
更新時間： 2019-11-15 20:21:43

2.3　元素選擇器

元素選擇器包括標簽選擇器、類選擇器、ID選擇器和通配選擇器。

2.3.1　標簽選擇器

標簽選擇器也稱為類型選擇器，它直接引用HTML標簽名稱，用來匹配同名的所有標簽。

　優點：使用簡單，直接引用，不需要為標簽添加屬性。
　缺點：匹配的范圍過大，精度不夠。

因此，一般常用標簽選擇器重置各個標簽的默認樣式。

【示例】下面的示例統一定義網頁中段落文本的樣式為：段落內文本字體大小為12像素，字體顏色為紅色。實現該效果，可以考慮選用標簽選擇器定義如下樣式。

2.3.2　類選擇器

類選擇器以點號（.）為前綴，后面是一個類名。應用方法：在標簽中定義class屬性，然后設置屬性值為類選擇器的名稱。

　優點：能夠為不同標簽定義相同樣式；使用靈活，可以為同一個標簽定義多個類樣式。
　缺點：需要為標簽定義class屬性，影響文檔結構，操作相對麻煩。

【示例】下面的示例演示了如何在對象中應用多個樣式類。

第1步，新建HTML5文檔，保存為test.html。

第2步，在<head>標簽內添加<style type="text/css">標簽，定義一個內部樣式表。

第3步，在<style>標簽內輸入下面的樣式代碼，定義3個類樣式：red、underline和italic。

第4步，在段落文本中分別引用這些類，其中第2段文本標簽引用了3個類樣式，演示效果如圖2.3所示。

    <p class="underline">問君能有幾多愁，恰似一江春水向東流。</p>
    <p class="red italic underline">剪不斷，理還亂，是離愁。別是一般滋味在心頭。</p>
    <p class="italic">獨自莫憑欄，無限江山，別時容易見時難。流水落花春去也，天上人間。</p>

圖2.3　多類應用效果

2.3.3　ID選擇器

ID選擇器以井號（#）為前綴，后面是一個ID名。應用方法：在標簽中定義id屬性，然后設置屬性值為ID選擇器的名稱。

　優點：精準匹配。
　缺點：需要為標簽定義id屬性，影響文檔結構，相對于類選擇器，缺乏靈活性。

【示例】下面的示例演示了如何在文檔中應用ID選擇器。

第1步，啟動Dreamweaver，新建一個網頁，在<body>標簽內輸入<div>標簽。

    <div id="box">問君能有幾多愁，恰似一江春水向東流。</div>

第2步，在<head>標簽內添加<style type="text/css">標簽，定義一個內部樣式表。

第3步，輸入下面的樣式代碼，為id屬性值為box的元素定義固定的寬和高，并設置背景圖像，以及邊框和內邊距大小。

第4步，在瀏覽器中預覽，效果如圖2.4所示。

圖2.4　ID選擇器的應用

提示：不管是類選擇器，還是ID選擇器，都可以指定一個限定標簽名，用于限定它們的應用范圍。例如，針對上面的示例，在ID選擇器前面增加一個div標簽，這樣div#box選擇器的優先級會大于#box選擇器的優先級。在同等條件下，瀏覽器會優先解析div#box選擇器定義的樣式。對于類選擇器，也可以使用這種方式限制類選擇器的應用范圍，并增加其優先級。

2.3.4　通配選擇器

通配選擇器使用星號（*）表示，用來匹配文檔中的所有標簽。

【示例】使用下面的樣式可以清除所有標簽的邊距。

    * { margin: 0; padding: 0; }

官术网_书友最值得收藏!

HTML5 移動Web開發從入門到精通（微課精編版）

2.3 元素選擇器

2.3.1 標簽選擇器

2.3.2 類選擇器

2.3.3 ID選擇器

2.3.4 通配選擇器

2.3　元素選擇器

2.3.1　標簽選擇器

2.3.2　類選擇器

2.3.3　ID選擇器

2.3.4　通配選擇器