【CSS】【4】CSS選擇器練習

練習一：

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、解釋：

不再解釋了，可以實際練習一下，自然會明白其中的道理。

本文轉自qingkechina 51CTO部落格，原文連結：http://blog.51cto.com/qingkechina/1261735，如需轉載請自行聯絡原作者

【CSS】【4】CSS選擇器練習

相關文章