1、類別選取器使用練習：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>類別選取器使用樣本</title> <style type="text/css"> .red { color:red; font-size:12px; } .blue { color:blue; font-size:20px; } </style> </head> <body> <p>無類別選取器效果</p> <p class="red">類別選取器red效果</p> <p class="blue">類別選取器blue效果</p> <h3 class="blue">同一個類別選取器可以使用到另外的標記上</h3> </body></html>
2、效果：
3、解釋：
第一行效果：由於沒有對標記P進資料列選取器定義，所以顯示預設顏色和大小；
第二行效果：由於對標記P使用了red類別選取器，所以字型顯示為紅色且12像素大小；
第三行效果：由於對標記P使用了bule類別選取器，所以字型顯示為藍色且20像素大小；
第四行效果：這個想說明同一個類別選取器可使用在不同的標記上，除了能<p class="blue">之外，還可以<h3 class="blue">；特別值得一提的是由於<h3>使用了blue類別選取器，所以內容顯示為藍色20像素大小之外，還體現出<h3>標記本身的特性。關於這一點會在後面陸續涉及到。
練習二：
1、標記選取器和ID選取器練習：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>標記選取器和ID選取器練習</title> <style type="text/css"> /* * 標記選取器定義 */ p { color:blue; } /* * 交集複合選取器定義 */ p.special { color:red; } /* * ID選取器定義 */ #special { color:green; } </style> </head> <body> <p>普通段落文本</p> <h3>普通h3標記文本</h3> <p class="special">指定了special類別選取器的p段落文本</p> <h3 id="special">指定了special的ID選取器的h3標題文本</h3> </body></html>
2、效果：
3、解釋：
第一行效果：由於定義了標記選取器p，所以段落p中的內容將以藍色顯示；
第二行效果：由於沒有定義標記選取器h3，所以標題h3中的內容將以預設黑色顯示；
第三行效果：由於同時使用了標記選取器p和類別選取器special，這正符合交集選取器的定義，所以其中的內容以交集選取器p.special定義的形式展示，所以顯示為紅色；
第四行效果：由於使用了ID選取器special同時使用了h3預設的處理，所以標題h3中的內容既使用了綠色，同時以h3定義的字型大小顯示；
練習三：
1、並集選取器練習：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>標記選取器和ID選取器練習</title> <style type="text/css"> /* * 標記選取器定義 */ h1,h2,h3,p { color:purple; font-size:15px; } /* * 並集選取器定義 */ h2.special, .special, #one { text-decoration:underline; } </style> </head> <body> <h1>樣本文字h1</h1> <h2 class="special">樣本文字h2</h2> <h3>樣本文字h3</h3> <p>樣本文字p1</p> <p class="special">樣本文字h2</p> <p id="one">樣本文字p3</p> </body
>
</html>
2、效果：
3、解釋：
不再解釋了，可以實際練習一下，自然會明白其中的道理。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
