2. 程式人生 > >CSS3選擇器詳解

CSS3選擇器詳解

阿新 • • 發佈：2018-12-25

一、CSS3選擇器分類
1.基本選擇器
2.層次選擇器
3.偽類選擇器
1）動態偽類選擇器
2）目標偽類選擇器
3）語言偽類選擇器
4）UI元素狀態偽類選擇器
5）結構偽類選擇器
6）否定偽類選擇器
4.偽元素
5.屬性選擇器

二、基本選擇器語法
這裡寫圖片描述
這裡著重說一下群組選擇器（selector1,selector2,…,selectorN）,是將有相同樣式的元素分組在一起，每個選擇器之間用逗號隔開，表示規則中包含多個不同的選擇器，省去逗號的話就變成了後代選擇器。

三、層次選擇器語法
這裡寫圖片描述

1.後代選擇器（E F）
也稱包含選擇器，作用是選擇元素E的所有後代元素F，F不管是E的子元素，孫輩元素，或更深層次關係，都被選中。
例項：
效果如圖：
這裡寫圖片描述


程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style type="text/css"> 
*{margin:0;
padding:0;}
body{
    width:300px;
    margin:0 auto;
}
div{
    margin:5px;
    padding:5px;
    border
 
:1px solid #ccc;
}
div div{
    background:orange;
}
</style>
</head>

<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4
    <div>5</div>
    <div>7</div>
</div>
<div>7
    <div>8
        <div>9
            <div
 
>10</div>
        </div>
    </div>
</div>
</body>
</html>

2.子選擇器（E>F)
只能選擇某元素的子元素。
例項：
樣式表中增加一條：

body>div{
    background: green;
}

效果如圖：
這裡寫圖片描述

3.相鄰兄弟選擇器（E+F）
效果如圖：
這裡寫圖片描述
程式碼如下：

<style type="text/css"> 
*{margin:0;
padding:0;}
body{
    width:300px;
    margin:0 auto;
}
div{
    margin:5px;
    padding:5px;
    border:1px solid #ccc;
}
div div{
    background:orange;
}
body>div{
    background: green;
}

.active + div{
    background:red;
}
</style>
</head>

<body>
<div class="active">1</div><!--為了說明相鄰兄弟選擇器，在此處新增一類名active -->
<div>2</div>
<div>3</div>
<div>4
    <div>5</div>
    <div>7</div>
</div>
<div>7
    <div>8
        <div>9
            <div>10</div>
        </div>
    </div>
</div>
</body>

4、通用兄弟選擇器（E~F）
效果如圖：
這裡寫圖片描述
新增如下樣式程式碼：

.active ~ div{
    background:yellow;
}

三、偽類選擇器
1.動態偽類選擇器：
動態偽類並不存在與html中，只有當用戶和網站互動的時候才體現出來。
動態偽類包含兩種：一種是在連結中常看到的錨點偽類，
另一種是使用者行為偽類。
詳細說明如下所示：
這裡寫圖片描述
實戰：美化按鈕
效果如圖：正常，懸浮和點選狀態的變化
這裡寫圖片描述
程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style type="text/css"> 
.download-info{
    text-align:center;
}
/*預設狀態下按鈕效果*/
.btn{
    background-color:#0074cc;
    *background-color:#0055cc; /*css hack 寫法，用於特定瀏覽器識別*/
    /*CSS#漸變製作背景圖片*/
    background-image: -ms-linear-gradient(top;#0088cc,#0055cc);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));
    background-image: -webkit-linear-gradient(top,#0088cc,#0055cc);
    background-image: -o-linear-gradient(top,#0088cc,#0055cc);
    background-image: -moz-linear-gradient(top,#0088cc,#0055cc);
    background-image: linear-gradient(top,#0088cc,#0055cc);
    background-repeat:repeat-x;
    display:inline-block;
    *display:inline;
    border:1px solid #cccccc;
    *border:0;
    border-color:#ccc;

    /*CSS3的色彩模組*/
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius:6px;
    color:#ffffff;
    cursor:pointer;/*cursor規則是設定網頁瀏覽時使用者滑鼠指標的樣式，也就是滑鼠的圖形形狀*/
    font-size:20px;
    font-weight:normal;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);/*這一句程式碼是ie自帶濾鏡的漸變效果，漸變開始的顏色是#ffffff，結束的顏色是#ECE9D8，gradientType=0表示縱向淅變，如果把它改成1就是橫向漸變~~*/
    filter: progid:dximagetransform.microsoft.gradient(enable=false);
    line-height:normal;
    padding:14px 24px;
    text-align:center;

    /*CSS3文字陰影特性*/
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-decoration:none;
    vertical-align:middle;
    *zoom:1;/*css中的zoom的作用
1、檢查頁面的標籤是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源於這裡。畢竟頁面的模板一般都是由開發來巢狀的，而他們很容易犯此類問題。
快捷提示：可以用 Dreamweaver 開啟檔案檢查，一般沒有閉合的標籤，會黃色背景高亮。

　　2、樣式排除法
有些複雜的頁面也許載入了 N 個外鏈 CSS 檔案，那麼逐個刪除 CSS 檔案，找到 BUG 觸發的具體 CSS 檔案，縮小鎖定的範圍。

　　對於剛才鎖定的問題 CSS 樣式檔案，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。

　　3、模組確認法
有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模組，尋找到觸發問題的 HTML 模組。

　　4、檢查是否清除浮動
其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用 無額外 HTML 標籤的清除浮動的方法（儘量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。

　　5、檢查 IE 下是否觸發 haslayout
很多的 IE 下複雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對於處理複雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的 《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀 藍色上的轉帖 ）
快捷提示：如果觸發了 haslayout，IE 的除錯工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。

　　6、邊框背景除錯法
故名思議就是給元素設定顯眼的邊框或者背景（一般黑色或紅色），進行除錯。此方法是最常用的除錯 CSS BUG 的方法之一，對於複雜 BUG 依舊適用。經濟實惠還環保^^
最後想強調一點的是，養成良好的書寫習慣，減少額外標籤，儘量語義，符合標準，其實可以為我們減少很多額外的複雜 CSS BUG，更多的時候其實是我們自己給自己製造了麻煩*/

}

/*懸浮狀態下按鈕效果*/
.btn:hover{
    background-position: 0 -15px;
    background-color: #0055cc;
    *background-color:#004ab3;
    color:#ffffff;
    text-decoration:none;/*這個屬性允許對文字設定某種效果，如加下劃線。*/
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

    /*css3動畫效果*/
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -ms-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

/*點選時效果*/
.btn:active{
    background-color: #0055cc;
    *background-color: #004ab3;
    background-color:#004099 \9;
    background-image: none;
    outline:0;/*outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用*/
    /*盒子陰影特性*/
    box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.15);
    color:rgba(255, 255, 255, 0.75);
}

/*獲得焦點按鈕效果*/
.btn:focus{
    outline:thin dotted #333;
    outline:5px auto -webkit-focus-ring-color;/*作用使得外邊框發光*/
    outline-offset: -2px;/*outline-offset 屬性對輪廓進行偏移，並在邊框邊緣進行繪製*/
}


</style>
</head>

<body>
<div class="download-info"><a href="#" class="btn">View project on GitHub</a></div>
</body>
</html>

這裡有有關於css hack 寫法的詳細說明。

2.目標偽類：
語法：
這裡寫圖片描述
實戰：手風琴效果：
這裡是詳細介紹。

3.語言偽類選擇器：
根據元素的語言編碼匹配元素。這種語言資訊必須包含在文件中，或與文件關聯，不能從CSS指定。為文件指定語言，有兩種方法可以表示：

<!DOCTYPE HTML>
<html lang="en-US">

另一種方法是手工在文件中指定lang屬性，並設定對應的語言值：

<body lang="fr">

在Twitter上有對不同語言的處理，一下程式碼片段是來自https://twitter.com/的一段對於不同語言處理的程式碼:

<ul id="supported_languages">
            <li><a href="?lang=zh-tw" data-lang-code="zh-tw" title="繁體中文" class="js-language-link js-tooltip">繁體中文</a></li>
            <li><a href="?lang=ja" data-lang-code="ja" title="日文" class="js-language-link js-tooltip">日本語</a></li>
            <li><a href="?lang=id" data-lang-code="id" title="印度尼西亞文" class="js-language-link js-tooltip">Bahasa Indonesia</a></li>
            <li><a href="?lang=msa" data-lang-code="msa" title="馬來文" class="js-language-link js-tooltip">Bahasa Melayu</a></li>
            <li><a href="?lang=cs" data-lang-code="cs" title="捷克文" class="js-language-link js-tooltip">Čeština</a></li>
            <li><a href="?lang=da" data-lang-code="da" title="丹麥文" class="js-language-link js-tooltip">Dansk</a></li>
            <li><a href="?lang=de" data-lang-code="de" title="德文" class="js-language-link js-tooltip">Deutsch</a></li>
            <li><a href="?lang=en" data-lang-code="en" title="英文" class="js-language-link js-tooltip">English</a></li>
            <li><a href="?lang=en-gb" data-lang-code="en-gb" title="英式英文" class="js-language-link js-tooltip">English UK</a></li>
            <li><a href="?lang=es" data-lang-code="es" title="西班牙文" class="js-language-link js-tooltip">Español</a></li>
            <li><a href="?lang=fil" data-lang-code="fil" title="菲律賓文" class="js-language-link js-tooltip">Filipino</a></li>
            <li><a href="?lang=fr" data-lang-code="fr" title="法文" class="js-language-link js-tooltip">Français</a></li>
            <li><a href="?lang=it" data-lang-code="it" title="義大利文" class="js-language-link js-tooltip">Italiano</a></li>
            <li><a href="?lang=hu" data-lang-code="hu" title="匈牙利文" class="js-language-link js-tooltip">Magyar</a></li>
            <li><a href="?lang=nl" data-lang-code="nl" title="荷蘭文" class="js-language-link js-tooltip">Nederlands</a></li>
            <li><a href="?lang=no" data-lang-code="no" title="挪威文" class="js-language-link js-tooltip">Norsk</a></li>
            <li><a href="?lang=pl" data-lang-code="pl" title="波蘭文" class="js-language-link js-tooltip">Polski</a></li>
            <li><a href="?lang=pt" data-lang-code="pt" title="葡萄牙文" class="js-language-link js-tooltip">Português</a></li>
            <li><a href="?lang=ro" data-lang-code="ro" title="羅馬尼亞文" class="js-language-link js-tooltip">Română</a></li>
            <li><a href="?lang=fi" data-lang-code="fi" title="芬蘭文" class="js-language-link js-tooltip">Suomi</a></li>
            <li><a href="?lang=sv" data-lang-code="sv" title="瑞典文" class="js-language-link js-tooltip">Svenska</a></li>
            <li><a href="?lang=vi" data-lang-code="vi" title="越南文" class="js-language-link js-tooltip">Tiếng Việt</a></li>
            <li><a href="?lang=tr" data-lang-code="tr" title="土耳其文" class="js-language-link js-tooltip">Türkçe</a></li>
            <li><a href="?lang=el" data-lang-code="el" title="希臘文" class="js-language-link js-tooltip">Ελληνικά</a></li>
            <li><a href="?lang=ru" data-lang-code="ru" title="俄文" class="js-language-link js-tooltip">Русский</a></li>
            <li><a href="?lang=uk" data-lang-code="uk" title="烏克蘭文" class="js-language-link js-tooltip">Українська мова</a></li>
            <li><a href="?lang=he" data-lang-code="he" title="希伯來文" class="js-language-link js-tooltip">עִבְרִית</a></li>
            <li><a href="?lang=ar" data-lang-code="ar" title="阿拉伯文" class="js-language-link js-tooltip">العربية</a></li>
            <li><a href="?lang=fa" data-lang-code="fa" title="波斯文" class="js-language-link js-tooltip">فارسی</a></li>
            <li><a href="?lang=mr" data-lang-code="mr" title="馬拉地文" class="js-language-link js-tooltip">मराठी</a></li>
            <li><a href="?lang=hi" data-lang-code="hi" title="印地文" class="js-language-link js-tooltip">हिन्दी</a></li>
            <li><a href="?lang=bn" data-lang-code="bn" title="孟加拉文" class="js-language-link js-tooltip">বাংলা</a></li>
            <li><a href="?lang=gu" data-lang-code="gu" title="古吉拉特文" class="js-language-link js-tooltip">ગુજરાતી</a></li>
            <li><a href="?lang=ta" data-lang-code="ta" title="泰米爾文" class="js-language-link js-tooltip">தமிழ்</a></li>
            <li><a href="?lang=kn" data-lang-code="kn" title="卡納達文" class="js-language-link js-tooltip">ಕನ್ನಡ</a></li>
            <li><a href="?lang=th" data-lang-code="th" title="泰文" class="js-language-link js-tooltip">ภาษาไทย</a></li>
            <li><a href="?lang=ko" data-lang-code="ko" title="韓文" class="js-language-link js-tooltip">한국어</a></li>
        </ul>

4.UI元素狀態偽類選擇器
主要用於form表單元素上，以提高網頁人機互動，操作邏輯以及頁面整體美觀
UI元素狀態一般包括：啟用、禁用、選中、未選中、獲得焦點、失去焦點、鎖定和待機等。如表單中文字輸入框，html元素選中和未選中狀態，這幾種狀態是CSS3種常用狀態偽類選擇器；詳細語法如下：
這裡寫圖片描述
對於IE6~8使用UI元素偽類選擇器需要使用特別的方法處理。
使用js庫，選用內建已相容UI元素偽類選擇器的js庫或框架，任何在程式碼中引入它們並完成想要的效果，由Keith Clark 編寫的Selectivizr指令碼是一個不錯的選擇。先將該指令碼引入頁面中，再從7個js庫選擇一個引入，UI狀態偽類選擇器就能工作在IE上了。
除使用js庫外，還可用用原始的做法，使用類名處理，即給元素設定class屬性處理，例如禁用按鈕效果，可用在HTML元素新增class=“disable”,然後為此新增樣式。

<style type=text/css>
.btn.disabled, /*等效於.btn:disabled，用於相容IE低版本瀏覽器*/
.btn:disabled{
        ...
    }
</style>

5.結構偽類選擇器
有4個偽類選擇器接受引數n

  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-of-type(n)
  • :nth-last-of-type(n)
    引數n可用是正數（1、2、3、4）、關鍵字（odd、even）,還可以是公式（2n+1、-n+5）,引數n起始值始終是1，而不是0。當引數n 為0時，選擇器將匹配不到任何元素。

4.1 :first-child
4.2 :last-child
4.3.1 :nth-child()
如：ul>li:nth-child(3) 如果第三個子院不是li,則沒有任何元素被選中；
4.3.2 :nth-child(n) 引數n是一個簡單的表示式，取值從0開始計算的，到什麼時候結束不知道，如果在實際應用中直接這樣使用，將會選中父元素中所有子元素。
ul>li:nth-child(3){ background-color：orange；}
4.4 ：nth-last-child
從父元素最後一個子元素開始計算選擇特定元素
4.5 ：nth-of-type
只計算父元素中指定某型別子元素。

在web應用中”:nth-of-type”在以下場景中可以使用。
- 營造一種有隨意感的介面，如改變每張圖片的旋轉角度；
- 使文章中的圖片交替向左向右浮動；
- 為一篇文章的頭一段設定不同的樣式，如首字下沉；
- 為一個定義列表的條上使用交替樣式；
- 製作圖表。
4.6 ：only-child的使用
表示一個元素是它父元素的唯一子元素
4.7 ：only-of-type的使用
選擇一個元素是它父元素唯一一個相同型別的子元素。
4.8 ：empty的使用
選擇沒有任何內容的元素，哪怕是一個空格。這個選擇器用例處理動態輸出內容非常方便。例如想高粱提示出使用者搜尋出來的結果為空時：

#results:empty{background-color:#fcc;}

實戰程式碼如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style type="text/css"> 
*{
    margin:0;
    padding:0;
}

ul{
margin:50px auto;
width:400px;
list-style:none outside none;
}
li{
    display:inline-block;
    margin:5px;
    padding:5px;
    width:50px;
    height:50px;
    font:bold 30px/50px arial;
    background:#000;
    color:#fff;
    border-radius:50px;
    text-align:center;
}
ul>li:first-child{
    background-color: green;
}
ul>li:nth-child(3){
    background-color:yellowgreen;
}
/*ul>li:nth-child(n){
    background-color:orange;
}*/
/*ul>li:nth-child(2n){ //選中偶數
    background-color:orange;
}*/
/*ul>li:nth-child(even){
    background-color:orange;
}*/
/*ul>li:nth-child(n+5){
    background-color:blue;
}*/
ul>li:nth-last-child(4){/*從後數第四個*/
    background-color:blue;
}
ul>li:nth-child(odd){

    /*選中的是奇數項*/
}

ul>li:nth-last-child(even){
    /*選中的也是偶數*/
}


</style>
</head>

<body>
<ul>
    <li>1</li>

相關推薦

CSS3選擇器詳解

一、CSS3選擇器分類 1.基本選擇器 2.層次選擇器 3.偽類選擇器 1）動態偽類選擇器 2）目標偽類選擇器 3）語言偽類選擇器 4）UI元素狀態偽類選擇器 5）結構偽類選擇器 6）否定偽類選擇

CSS3 選擇器詳解

一、CSS樣式的基本規則（1）連結外部樣式檔案：這種方式將樣式檔案徹底與HTML，樣式檔案需要額外的引入。在這種方式下，一批樣式可以控制多分文件。<link rel="stylesheet" type="text/css" href="Css樣式單1.css"/>

CSS3 基礎(1)——選擇器詳解

hover 代碼 -o this site 特征 child ack ble CSS3選擇器詳解 一、 屬性選擇器 　　在CSS3中，追加了三個屬性選擇器分別為：[att*=val]、[att^=val]和[att$=val]，使得屬性選擇器有了通配符的概念。 選

關於css3屬性選擇器詳解

什麼是屬性選擇器 指對帶有指定屬性的HTML元素設定樣式，有以下幾種： 1.element[attribute]    2.element[attribute = "value"]  3.element[attribute ~= "value"]  4.ele

css3筆記系列-3.css中的各種選擇器詳解，不看後悔系列

  最詳細的css3選擇器解析   選擇器是什麼？ 　　比較官方的解釋：在 CSS 中，選擇器是一種模式，用於選擇需要新增樣式的元素。        最常見的 CSS 選擇器是元素選擇器。換句話說，文件的元素就是最基本

jquery選擇器詳解

orm visible type nbsp line style .html box con 一、基本選擇器 #box .box1 div $("#box, .box1"); 二、層級選擇器 $("div p"); //div中的所有p $("div > p");

jQuery的介紹和選擇器詳解

markdown spa 結果 過程 問題 js對象 -m 版本 分享圖片 本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 jQuery 的介紹 引入 jQuery 的原因 在用 js

css選擇器詳解

cto 而不是 波浪 alt {} style sce 類選擇器 color 1、元素選擇器 2、類選擇器 3、ID選擇器 4、屬性選擇器 5、派生選擇器 1、元素選擇器 最常見的css選擇器當屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HT

CSS選擇器詳解（一）常用選擇器

toolbar selector rst prope 第一個 出現 很多 script img 目錄 類型選擇器 類選擇器 ID選擇器 偽類 偽元素 類型選擇器 通過類型選擇器可以選擇某一類型的html標簽，並對其使用樣式。 語法：

web前端學習（三）css學習筆記部分（6）-- 選擇器詳解

9、選擇器詳解 9.1  屬性選擇器   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</

CSS入門之樣式表與選擇器詳解

    CSS用來定義HTML頁面中文字顯示樣式，還有類、層等特性，還可以對文字重疊、定位等。引入CSS到HTML中，主要是因為在傳統的HTML上控制文字顯示樣式和版面非常難，引入CSS之後，控制方式變得簡單，頁面也變得更加美觀、豐富。     所以CSS主要就是用來提供樣

JQuery 常見選擇器詳解練習1

 1.常見基本選擇器程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

CSS中交集選擇器詳解

  CSS中交集選擇器有兩種，分別是例如 p.special{} 以及p#special類似的兩種 交集選擇器中不能有空格，下面是測試程式碼 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <

四 . css系列之選擇器詳解及權重

（一）選擇器詳解 1.標籤選擇器（元素選擇器）:HTML標籤作為選擇器，作用是選取HTML文件中相同的HTML元素P{} 2.類選擇器 第一步：設定類名<開始標籤 class="類名"></結束標籤> 第二步：為類設定樣式.

CSS 類選擇器詳解——CSS 多類選擇器

CSS 類選擇器 類選擇器允許以一種獨立於文件元素的方式來指定樣式。 該選擇器可以單獨使用，也可以與其他元素結合使用。 提示：只有適當地標記文件後，才能使用這些選擇器，所以使用這兩種選擇器通常需要先做一些構想和計劃。 要應用樣式而不考慮具體設計的元素，最常用的方法就是使用類選擇器。 修改 HTML 程式碼

jQuery過濾選擇器詳解

基本過濾選擇器 選取第一個元素(:first) //選擇第一個div元素. $('#btn1').click(function(){ $('div:first').css("background","#b

CSS選擇器詳解（總結）

一、CSS選擇器。 a、基本選擇器詳解。 名稱 語法構成 描述 返回值 示例 標籤選擇器 element 根據給定的標籤名匹配元素 元素集合

常用jQuery選擇器詳解

元素選擇是一切操作的前提，jQuery中$()函式最強大最常用的功能之一就是使用選擇器選擇DOM元素。這裡就彙總一些十分常用的jQuery選擇器。 1、jQuery選擇器基本結構 $('選擇器') $('選擇器 上下文') 2、使用基本css選擇

Android selector背景選擇器詳解

selector使用 selector主要用於點選按鈕或者一些控制元件時可以產生動態的點選效果，使使用者獲得更好的體驗。下面介紹一下它的使用方式： 1.首先在res下建立drawable目錄,然

CSS選擇器詳解及常用樣式表標記標籤屬性

本學期開設有個ASP.NET課程，剛開始兩週，一直處於複習 web技術階段，剛好自己準備好好學一下CSS的相關內容，就順路一起看看，瞭解CSS常用的選擇器，這樣在後續的個人網站開發上，可以更方便，進入正題：CSS：Cascading Style Sheets(層疊樣式表) 常