今天的影片千萬不能跳過呦！拜託拜託～
這邊要介紹CSS選擇器，是之後編寫爬蟲程式時的重要夥伴！
以下為影片中有使用到的程式碼
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
p { color:blue; text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
p.p1 { color:blue; text-align:center;} /*p1為classname*/
</style>
</head>
<body>
<p class="p1">Hello World!</p>
<p>Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
*.p1 { color:blue; text-align:center;}
</style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p1">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
#hello1 { color:blue; text-align:center;}
#hello2 { color:red; text-align:center;}
</style>
</head>
<body>
<p id="hello1">Hello World!</p>
<p id="hello2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
[class] { color:blue; text-align:center;}
</style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
[class="p1"] { color:blue; text-align:center;}
</style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
h1[class="p1"] { color:blue; text-align:center;}
</style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p2">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>初次見面</title>
<style>
*{ color:blue; text-align:center;}
</style>
</head>
<body>
<h1 class="p1">Hello World!</h1>
<p class="p1">Hello World!</p>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>最終檔案</title>
</head>
<body>
<h1>水母的基本介紹</h1>
<p>擷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">維基百科</a></p>
<br>
<p>水母是無脊椎動物，屬於刺胞動物門中的一類，其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超過兩百種的水母，牠們分布於全球各地的水域裡，無論是熱帶的<br>
水域﹑溫帶的水域﹑淺水區﹑約百米深的海洋，甚至是淡水區都有牠們的蹤影。</p>
<img src="DSC_0394.jpg" alt="於海生館拍攝的水母" height="300" width="450">
<ul>
<li><a href="CSShtml2.html">水母在生物學中的分類</a></li>
<li><a href="CSShtml1.html">水母的秘密</a></li>
</ul>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>最終檔案</title>
<style>
div.div1 { background-color:#00ff00;text-align:center;} /*綠*/
div.div2 { background-color:#33FFFF;text-align:center} /*淺藍*/
div.div3 { background-color:#D28EFF;text-align:center} /*紫*/
</style>
</head>
<body>
<div class="div1">
<h1>水母的基本介紹</h1>
<p>擷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">維基百科</a></p>
<br>
</div>
<div class="div2">
<p>水母是無脊椎動物，屬於刺胞動物門中的一類，其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超過兩百種的水母，牠們分布於全球各地的水域裡，無論是熱帶的<br>
水域﹑溫帶的水域﹑淺水區﹑約百米深的海洋，甚至是淡水區都有牠們的蹤影。</p>
<img src="DSC_0394.jpg" alt="於海生館拍攝的水母" height="300" width="450">
</div>
<div class="div3">
<ul>
<li><a href="CSShtml2.html">水母在生物學中的分類</a></li>
<li><a href="CSShtml1.html">水母的秘密</a></li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html lang="zh-tw">
<head>
<meta charset="utf-8">
<title>最終檔案</title>
<style>
div.div1 { background-color:#00ff00;text-align:center;}
div.div2 { background-color:#33FFFF;text-align:center;}
div.div3 { background-color:#D28EFF;text-align:center;}
span {color:red;}
</style>
</head>
<body>
<div class="div1">
<h1>水母的基本介紹</h1>
<p>擷取自<a href="https://zh.wikipedia.org/wiki/%E6%B0%B4%E6%AF%8D">維基百科</a></p>
<br>
</div>
<div class="div2">
<p>水母是<span>無脊椎動物</span>，屬於<span>刺胞動物門</span>中的一類，
其中包括水母、海葵、珊瑚、水螅。<br>
全世界的海洋中有超過兩百種的水母，牠們分布於全球各地的水域裡，無論是熱帶的<br>
水域﹑溫帶的水域﹑淺水區﹑約百米深的海洋，甚至是淡水區都有牠們的蹤影。</p>
<img src="DSC_0394.jpg" alt="於海生館拍攝的水母" height="300" width="450">
</div>
<div class="div3">
<ul>
<li><a href="CSShtml2.html">水母在生物學中的分類</a></li>
<li><a href="CSShtml1.html">水母的秘密</a></li>
</ul>
</div>
</body>
</html>
如果在影片中有說得不太清楚或錯誤的地方，歡迎留言告訴我，謝謝您的指教。
iThome鐵人賽
看影片追技術