1.class選取器
<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>
2.標記選取器
<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>
3.標記選取器.class
<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>
4.同時使用兩個class
<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="two one">同時使用兩種class，同時使用</h4>
<h4>一種都不使用</h4>
</body>
</html>
5.ID選取器
<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>
6.集體聲明
<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>
7.全域聲明
<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>
8.CSS選取器的嵌套聲明
<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>
9.父子關係1
<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>
10.父子關係2
<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>
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
