CSS選擇器總結（程式碼例項+執行效果圖）
阿新 • • 發佈：2018-12-23
一、標籤選擇器
我們一般宣告或定義樣式要用到如下格式的程式碼：
選擇器{
CSS樣式程式碼；
}
在'{'之前的就是CSS選擇器，選擇器確定了'{ }'中樣式的作用物件，如下程式碼，“h1”就是選擇器。確定了大括號內的樣式作用物件就是h1標籤，這也是一種最直接的選擇器——標籤選擇器。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>標籤選擇器</title> <style type="text/css"> h1{ /*此處h1就為選擇器*/ font-size:25px; /*文字大小定為25px*/ color:red; /*文字顏色定為紅色*/ border:1px solid green; /*設定文字邊框綠色1px*/ } </style> </head> <body> <h1>標籤選擇器</h1> </body> </html>
執行效果：
二、類選擇器
我們除了可以選擇文件標籤作為選擇器，也可以獨立於文件元素來指定樣式，這就需要用到——類選擇器。類選擇器的語法是：
.類選器名稱{
css樣式程式碼;
}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>類選擇器</title> <style type="text/css"> .set{ /*set為類選擇器*/ color:green; /*設定顏色為綠色*/ } </style> </head> <body> <h1>類選擇器</h1> <p><span class="set">類選擇器</span>在css樣式編碼中是最常用到的。類選擇器允許以一種獨立於文件元素的方式來指定樣式。該選擇器可以單獨使用，也可以與其他元素結合使用。</p> </body> </html>
執行效果：
三、ID選擇器
與類選擇器相似的還有——ID選擇器。ID選擇器語法與類選擇器稍有不同：
1、為標籤設定id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）
#ID選擇器名稱{
CSS樣式程式碼；
}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ID選擇器</title> <style type="text/css"> #set{ /*ID選擇器*/ font-weight:900; /*設定字型為粗體*/ } </style> </head> <body> <p>使用 <span id="set">bold </span>關鍵字可以將文字設定為粗體。關鍵字 100 ~ 900 為字型指定了 9 級加粗度。如果一個字型內建了這些加粗級別，那麼這些數字就直接對映到預定義的級別，100 對應最細的字型變形，900 對應最粗的字型變形。數字 400 等價於 normal，而 700 等價於 bold。</p> </body> </html>
執行效果：
1、與類選擇器不同，在一個HTML文件中，ID選擇器只能使用一次，而類選擇器可以使用多次。
下面這段程式碼就是正確的（類選擇器使用了多次）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>類選擇器與ID選擇器區別</title>
<style type="text/css">
.name{ /*滑鼠劃過p標籤時內容樣式*/
color:red;
font-size:20px;
}
</style>
</head>
<body>
<h1>html</h1>
<p>全球資訊網上的一個超媒體文件稱之為一個頁面<span class="name">（外語：page）</span>。作為一個組織或者個人在全球資訊網上放置開始點的頁面稱為主頁<span class="name">（外語：Homepage</span>）或首頁，主頁中通常包括有指向其他相關頁面或其他節點的指標<span class="name">（超級連結</span>），所謂超級連結，就是一種統一資源定位器<span class="name">（Uniform Resource Locator，外語縮寫：URL）</span>指標，通過啟用（點選）它，可使瀏覽器方便地獲取新的網頁。這也是HTML獲得廣泛應用的最重要的原因之一。</p></span>
</body>
</html>執行效果：
下面這段程式碼就是錯誤的（ID選擇器使用了多次）：
<h1>html</h1>
<p>全球資訊網上的一個超媒體文件稱之為一個頁面<span id="ID">（外語：page）</span>。作為一個組織或者個人在全球資訊網上放置開始點的頁面稱為主頁<span id="ID">（外語：Homepage</span>）或首頁，主頁中通常包括有指向其他相關頁面或其他節點的指標<span id="ID">（超級連結</span>），所謂超級連結，就是一種統一資源定位器<span id="ID">（Uniform Resource Locator，外語縮寫：URL）</span>指標，通過啟用（點選）它，可使瀏覽器方便地獲取新的網頁。這也是HTML獲得廣泛應用的最重要的原因之一。</p>其實ID選擇器可以使用無限次，但是一般都只會用一次 因為JS 經常利用ID來拿物件 如果一個頁面出現了太多一樣的ID 那麼JS就不能用這個ID來拿物件了
下面這段程式碼就是正確的（用類選擇器為某個元素設定多個樣式）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>類和ID選擇器的區別</title>
<style type="text/css">
.first{
color:red;
}
.second{
font-size:20px;
}
#first{
color:red;
}
#second{
font-size:20px;
}
</style>
</head>
<body>
<p>在邏輯上將視為一個整體的一系列頁面的有機集合稱為網站（Website或Site）。超級文字標記語言（英文縮寫：HTML）是為<span class="first second">“網頁建立和其它可在網頁瀏覽器中看到的資訊”</span>設計的一種標記語言。</p>
</body>
</html>執行效果：
下面這段程式碼就是錯誤的（用ID選擇器為某個元素設定多個樣式）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>類和ID選擇器的區別</title>
<style type="text/css">
.first{
color:red;
}
.second{
font-size:20px;
}
#first{
color:red;
}
#second{
font-size:20px;
}
</style>
</head>
<body>
<p>在邏輯上將視為一個整體的一系列頁面的有機集合稱為網站（Website或Site）。超級文字標記語言（英文縮寫：HTML）是為<span id="first second">“網頁建立和其它可在網頁瀏覽器中看到的資訊”</span設計的一種標記語言。</p>
</body>
</html>四、子選擇器
子選擇器是一種很有用的選擇器，多用於有標籤巢狀的設定樣式情況。
子選擇器的語法：
.子選擇器的名稱>標籤或其他選擇器{ /*類選擇器方式定義*/
CSS樣式程式碼；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子選擇符</title>
<style type="text/css">
.child>li{ /*子選擇器，只會對第一代子元素生效*/
border:1px solid red;/*新增邊框樣式粗細為1px，顏色為紅色的實線*/
}
</style>
</head>
<body>
<h1>子選擇器</h1>
<ul class="child">
<li>子列表1 <!--第一代子元素-->
<ul>
<li>one</li> <!--第二代子元素-->
<li>two</li>
<li>three</li>
</ul>
</li>
<li>子列表2 <!--第一代子元素-->
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
</li>
</ul>
</body>
</html>執行效果：
五、包含選擇器
子選擇器的樣式作用物件是設定處後的第一代子元素，而與之對應，包含選擇器的樣式作用物件是設定出後的所有子代元素。
包含選擇器的語法：
#包含選擇器的名稱>標籤或其他選擇器{ /*ID選擇器方式定義*/
CSS樣式程式碼；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>包含(後代)選擇符</title>
<style type="text/css">
.include li{ /*包含選擇器，對所有子元素生效*/
border:1px solid red;/*新增邊框樣式粗細為1px，顏色為紅色的實線*/
}
</style>
</head>
<body>
<h1>包含選擇器</h1>
<ul class="include">
<li>子列表1 <!--第一代子元素-->
<ul>
<li>one</li> <!--第二代子元素-->
<li>two</li>
</ul>
</li>
<li>子列表2 <!--第一代子元素-->
<ul>
<li>first</li>
<li>second</li>
</ul>
</li>
</ul>
</body>
</html>執行效果：
六、通用選擇器
一種強大的選擇器，樣式作用物件為所有標籤元素。
通用選擇器語法：
* {
CSS樣式程式碼；
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>通用選擇器</title>
<style type="text/css">
* {
color:red;
}
</style>
</head>
<body>
<body>
<h1>通用選擇器</h1>
<p>paragragh1</p>
<p>paragragh2</p>
</body>
</body>
</html>執行效果：
七、偽類選擇器
當我們需要設定滑鼠滑過的樣式時，就會用到偽類選擇器。
偽類選擇器語法：
標籤:hover{
CSS樣式;
}
到目前為止，並不是所有瀏覽器都相容偽類選擇器，但所有瀏覽器都可以相容a:hover{}，是最常用的組合；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>偽類選擇符</title>
<style type="text/css">
p:hover{ /*滑鼠劃過p標籤時內容樣式*/
color:red;
font-size:20px;
}
</style>
</head>
<body>
<h1>勇氣</h1>
<p> 到目前為止，可以相容所有瀏鑑器的“偽類選擇符”就是 a 標籤上使用 :hover 了,也是最常用的組合了。</p>
</body>
</html>執行效果：
滑鼠滑過前：
滑鼠滑過後：
