CSS選擇器詳解（一）常用選擇器
阿新 • • 發佈：2018-06-16
toolbar selector rst prope 第一個 出現 很多 script img
類選擇器
ID選擇器
偽類
偽元素
語法：
目錄
類型選擇器類選擇器
ID選擇器
偽類
偽元素
類型選擇器
通過類型選擇器可以選擇某一類型的html標簽，並對其使用樣式。
語法：
selector {property1: value; property2:value; ...}
示例：
<html>
<head>
<style type="text/css">
h1 { color:Red; font-size:30px;}
</style>
</head>
<body>
<h1>這是一個h1標簽</h1>
</body>
</html>
效果圖：
h1 { color:Red; font-size:30px; }
這行代碼選擇了h1標簽，並將h1元素的顏色改為紅色，字體大小改為20px. 類型選擇器也可以使用嵌套的形式來選擇類型，這種方式也被稱為後代選擇器
示例：
<html>
<head>
<style type="text/css">
h1 { color:Red; font-size:30px;}
div h1{ color:Blue; font-size:20px;}
</style>
</head>
<body>
<h1>這是一個h1標簽</h1>
<div>
<h1>這是一個包含在div內的h1標簽</h1>
</div>
</body>
</html>
效果圖：
div h1{ color:Blue; font-size:20px;}
這行代碼只選擇了所有div元素內部的h1元素，並將顏色改為紅色，字體大小改為16px，div元素外部的所有h1都不會受到影響。
類選擇器
通過類選擇器可以選擇class相同的html標簽，並對其使用樣式。
語法：
.selector { property1: value; property2: value; ...}
示例：
<html>
<head>
<style type="text/css">
.error-message { color:Red; line-height:2px;}
</style>
</head>
<body>
<h3 class="error-message">Error Message:</h1>
<p class="error-message">description</p>
</body>
</html>
效果圖：
.error-message { color:Red; line-height:2px;}
這行代碼選擇了所有類為error-message的元素，並將其顏色改為紅色，行間距改為2px.
ID選擇器
ID選擇器可以選擇ID為某值的特定元素，並對其使用樣式。語法：
#selector { property1: value; property2:value; ...}
示例：
<html>
<head>
<style type="text/css">
#title { color:Gray;}
</style>
</head>
<body>
<h1 id="title">Title</h1>
</body>
</html>
效果圖：
#title { color:Gray;}
這行代碼選擇id為title的元素，並將其顏色改為Gray.
Tips:
有時頁面會出現很多包含類或ID的元素，而它們之間的差異僅僅是出現在頁面中的位置不同，不要給這些元素指定不同的類或ID，應將一個類或ID賦給它們的父元素，然後使用後代選擇器定位它們。偽類
有時我們需要根據文檔結構之外的其它條件對元素應用樣式，偽類用於向某些選擇器添加特殊效果。
語法：
selector : pseudo-class {property1: value； property2:value;}
示例1：
<html>
<head>
<style type="text/css">
a:link{color: Red;}
a:hover{color: Green;}
a:visited{color: Blue;}
</style>
</head>
<body>
<a href="http://www.cnblogs.com/fattydoit/" target="_blank">小胖搞IT</a>
</body>
</html>
效果圖：
未訪問鏈接時：
鼠標懸停在鏈接上時：
訪問過鏈接：
a:link{color: Red;}
a:hover{color: Green;}
a:visited{color: Blue;}
第一行代碼將未訪問的標簽顏色設置為紅色，第二行代碼將鼠標懸停在標簽上時標簽的顏色設置為綠色，第三行代碼將訪問過的標簽設置為藍色。
示例2：
<html>
<head>
<style type="text/css">
p:first-child{color: Red;}
</style>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<div>
<p>第一段</p>
<p>第二段</p>
</div>
</body>
</html>
效果圖：
p:first-child{color: Red;}
這行代碼將任意元素的第一個子元素p設置為紅色。
偽元素
偽元素也是用來向某些選擇器添加特殊效果的，很容易和偽類混淆，簡單地說，偽類是用來匹配頁面上真是存在的元素，如:link用來匹配a元素，而偽元素用來匹配邏輯上存在，但在頁面上並不存在的元素。
語法：
selector :: pseudo-element {property1: value； property2:value;}
示例：
<html>
<head>
<style type="text/css">
p::first-letter{color: Red;}
#p-with-logo::before{content:url(star.png);}
</style>
</head>
<body>
<p>這個段落首字符為紅色</p>
<p id="p-with-logo">這個段落有Logo</p>
</body>
</html>
效果圖：
p::first-letter{color: Red;}
#p-with-logo::before{content:url(star.png);}
第一行代碼找到p元素的第一個字符，並將其設置為紅色，第二行代碼找到id為p-with-logo的p元素，在它前面放一個logo.
原文網址：https://www.cnblogs.com/fattydoit/p/3492028.html
CSS選擇器詳解（一）常用選擇器