2-1.html
<html>
<head>
<title>class選擇器</title>
<style type="text/css">
<!--
.one{
color:red; /* 紅色 */
font-size:18px; /* 文字大小 */
}
.two{
color:green; /* 綠色 */
font-size:20px; /* 文字大小 */
}
.three{
color:cyan; /* 青色 */
font-size:22px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="one">class選擇器1</p>
<p class="two">class選擇器2</p>
<p class="three">class選擇器3</p>
<h3 class="two">h3同樣適用</h3>
</body>
</html>
<head>
<title>class選擇器</title>
<style type="text/css">
<!--
.one{
color:red; /* 紅色 */
font-size:18px; /* 文字大小 */
}
.two{
color:green; /* 綠色 */
font-size:20px; /* 文字大小 */
}
.three{
color:cyan; /* 青色 */
font-size:22px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p class="one">class選擇器1</p>
<p class="two">class選擇器2</p>
<p class="three">class選擇器3</p>
<h3 class="two">h3同樣適用</h3>
</body>
</html>
<html>
<head>
<title>class選擇器與標記選擇器</title>
<style type="text/css">
<!--
p{ /* 標記選擇器 */
color:blue;
font-size:18px;
}
.special{ /* 類別選擇器 */
color:red; /* 紅色 */
font-size:23px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p>class選擇器與標記選擇器1</p>
<p>class選擇器與標記選擇器2</p>
<p>class選擇器與標記選擇器3</p>
<p class="special">class選擇器與標記選擇器4</p>
<p>class選擇器與標記選擇器5</p>
<p>class選擇器與標記選擇器6</p>
</body>
</html>
<head>
<title>class選擇器與標記選擇器</title>
<style type="text/css">
<!--
p{ /* 標記選擇器 */
color:blue;
font-size:18px;
}
.special{ /* 類別選擇器 */
color:red; /* 紅色 */
font-size:23px; /* 文字大小 */
}
-->
</style>
</head>
<body>
<p>class選擇器與標記選擇器1</p>
<p>class選擇器與標記選擇器2</p>
<p>class選擇器與標記選擇器3</p>
<p class="special">class選擇器與標記選擇器4</p>
<p>class選擇器與標記選擇器5</p>
<p>class選擇器與標記選擇器6</p>
</body>
</html>
<html>
<head>
<title>標記選擇器.class</title>
<style type="text/css">
<!--
h3{ /* 標記選擇器 */
color:blue;
font-size:18px;
}
h3.special{ /* 標記.類別選擇器 */
color:red; /* 紅色 */
font-size:23px; /* 文字大小 */
}
.special{ /* 類別選擇器 */
color:green;
}
-->
</style>
</head>
<body>
<h3>標記選擇器.class1</h3>
<h3>標記選擇器.class2</h3>
<h3 class="special">標記選擇器.class3</h3>
<h3>標記選擇器.class4</h3>
<h3>標記選擇器.class5</h3>
<p class="special">使用於別的標記</p>
</body>
</html>
<head>
<title>標記選擇器.class</title>
<style type="text/css">
<!--
h3{ /* 標記選擇器 */
color:blue;
font-size:18px;
}
h3.special{ /* 標記.類別選擇器 */
color:red; /* 紅色 */
font-size:23px; /* 文字大小 */
}
.special{ /* 類別選擇器 */
color:green;
}
-->
</style>
</head>
<body>
<h3>標記選擇器.class1</h3>
<h3>標記選擇器.class2</h3>
<h3 class="special">標記選擇器.class3</h3>
<h3>標記選擇器.class4</h3>
<h3>標記選擇器.class5</h3>
<p class="special">使用於別的標記</p>
</body>
</html>
<html>
<head>
<title>同時使用兩個class</title>
<style type="text/css">
<!--
.one{
color:blue; /* 顏色 */
}
.two{
font-size:22px; /* 字體大小 */
}
-->
</style>
</head>
<body>
<h4>一種都不使用</h4>
<h4 class="one">同時使用兩種class，只使用第一種</h4>
<h4 class="two">同時使用兩種class，只使用第二種</h4>
<h4 class="one two">同時使用兩種class，同時使用</h4>
<h4>一種都不使用</h4>
</body>
</html>
<head>
<title>同時使用兩個class</title>
<style type="text/css">
<!--
.one{
color:blue; /* 顏色 */
}
.two{
font-size:22px; /* 字體大小 */
}
-->
</style>
</head>
<body>
<h4>一種都不使用</h4>
<h4 class="one">同時使用兩種class，只使用第一種</h4>
<h4 class="two">同時使用兩種class，只使用第二種</h4>
<h4 class="one two">同時使用兩種class，同時使用</h4>
<h4>一種都不使用</h4>
</body>
</html>
<html>
<head>
<title>ID選擇器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗體 */
}
#two{
font-size:30px; /* 字體大小 */
color:#009900; /* 顏色 */
}
-->
</style>
</head>
<body>
<p id="one">ID選擇器1</p>
<p id="two">ID選擇器2</p>
<p id="two">ID選擇器3</p>
<p id="one two">ID選擇器3</p>
</body>
</html>
<head>
<title>ID選擇器</title>
<style type="text/css">
<!--
#one{
font-weight:bold; /* 粗體 */
}
#two{
font-size:30px; /* 字體大小 */
color:#009900; /* 顏色 */
}
-->
</style>
</head>
<body>
<p id="one">ID選擇器1</p>
<p id="two">ID選擇器2</p>
<p id="two">ID選擇器3</p>
<p id="one two">ID選擇器3</p>
</body>
</html>
<html>
<head>
<title>集體聲明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, 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>
<h4>集體聲明h4</h4>
<h5>集體聲明h5</h5>
<p>集體聲明p1</p>
<p class="special">集體聲明p2</p>
<p id="one">集體聲明p3</p>
</body>
</html>
<head>
<title>集體聲明</title>
<style type="text/css">
<!--
h1, h2, h3, h4, h5, 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>
<h4>集體聲明h4</h4>
<h5>集體聲明h5</h5>
<p>集體聲明p1</p>
<p class="special">集體聲明p2</p>
<p id="one">集體聲明p3</p>
</body>
</html>
<html>
<head>
<title>全局聲明</title>
<style type="text/css">
<!--
*{ /* 全局聲明 */
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>
<h4>全局聲明h4</h4>
<h5>全局聲明h5</h5>
<p>全局聲明p1</p>
<p class="special">全局聲明p2</p>
<p id="one">全局聲明p3</p>
</body>
</html>
<head>
<title>全局聲明</title>
<style type="text/css">
<!--
*{ /* 全局聲明 */
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>
<h4>全局聲明h4</h4>
<h5>全局聲明h5</h5>
<p>全局聲明p1</p>
<p class="special">全局聲明p2</p>
<p id="one">全局聲明p3</p>
</body>
</html>
<html>
<head>
<title>CSS選擇器的嵌套聲明</title>
<style type="text/css">
<!--
p b{ /* 嵌套聲明 */
color:maroon; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>標記的方法</p>
嵌套之外的<b>標記</b>不生效
</body>
</html>
<head>
<title>CSS選擇器的嵌套聲明</title>
<style type="text/css">
<!--
p b{ /* 嵌套聲明 */
color:maroon; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
-->
</style>
</head>
<body>
<p>嵌套使<b>用CSS</b>標記的方法</p>
嵌套之外的<b>標記</b>不生效
</body>
</html>
<html>
<head>
<title>父子關係</title>
<base target="_blank">
<style>
<!--
h1{
color:red; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
h1 em{ /* 嵌套選擇器 */
color:#004400; /* 顏色 */
font-size:40px; /* 字體大小 */
}
-->
</style>
</head>
<body>
<h1>祖國的首都<em>北京</em></h1>
<p>歡迎來到祖國的首都<em>北京</em>，這裏是全國<strong>政治、<a href="economic.html"><em>經濟</em></a>、文化</strong>的中心</p>
<ul>
<li>在這裏，你可以：
<ul>
<li>感受大自然的美麗</li>
<li>體驗生活的節奏</li>
<li>領略首都的激情與活力</li>
</ul>
</li>
<li>你還可以：
<ol>
<li>去八達嶺爬長城</li>
<li>去香山看紅葉</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何問題，歡迎<a href="contactus">聯繫我們</a></p>
</body>
</html>
<head>
<title>父子關係</title>
<base target="_blank">
<style>
<!--
h1{
color:red; /* 顏色 */
text-decoration:underline; /* 下劃線 */
}
h1 em{ /* 嵌套選擇器 */
color:#004400; /* 顏色 */
font-size:40px; /* 字體大小 */
}
-->
</style>
</head>
<body>
<h1>祖國的首都<em>北京</em></h1>
<p>歡迎來到祖國的首都<em>北京</em>，這裏是全國<strong>政治、<a href="economic.html"><em>經濟</em></a>、文化</strong>的中心</p>
<ul>
<li>在這裏，你可以：
<ul>
<li>感受大自然的美麗</li>
<li>體驗生活的節奏</li>
<li>領略首都的激情與活力</li>
</ul>
</li>
<li>你還可以：
<ol>
<li>去八達嶺爬長城</li>
<li>去香山看紅葉</li>
<li>去王府井逛夜市</li>
</ol>
</li>
</ul>
<p>如果您有任何問題，歡迎<a href="contactus">聯繫我們</a></p>
</body>
</html>
<html>
<head>
<title>父子關係</title>
<style>
<!--
.li1{
color:red;
}
.li2{
color:blue;
}
.li1 ol li{ /* 利用CSS繼承關係 */
font-weight:bold; /* 粗體 */
text-decoration:underline; /* 下劃線 */
}
-->
</style>
</head>
<body>
<ul>
<li class="li1">關係1
<ul>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ul>
<ol>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ol>
</li>
<li class="li2">關係2
<ul>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ul>
<ol>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ol>
</li>
</ul>
</body>
</html>
<head>
<title>父子關係</title>
<style>
<!--
.li1{
color:red;
}
.li2{
color:blue;
}
.li1 ol li{ /* 利用CSS繼承關係 */
font-weight:bold; /* 粗體 */
text-decoration:underline; /* 下劃線 */
}
-->
</style>
</head>
<body>
<ul>
<li class="li1">關係1
<ul>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ul>
<ol>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ol>
</li>
<li class="li2">關係2
<ul>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ul>
<ol>
<li>頁面父子關係複雜時</li>
<li>頁面父子關係複雜時</li>
<li>這裏省略20個嵌套...</li>
</ol>
</li>
</ul>
</body>
</html>
來源：《精通CSS+DIV網頁樣式與佈局》