CSS1 中定義的選擇器
類型選擇器
用于選擇指定類型的元素（其實他就是 html 標簽選擇器），常見用法如下：
body {
/*對 body 元素定義樣式*/
}
body,div {
/*同時選擇多種標簽元素*/
}
ID 選擇器
用于選擇指定 ID 的 html 元素，常見使用方法如下：
<div id="nav">
</div>
<style>
#nav {
/*定義 ID 為 nav 的元素的樣式*/
}
</style>
因為 CSS 的渲染順序是從右往左進行渲染的，而 ID 則是全唯一的，那么就可以省略掉前面的類型選擇器。
類選擇器
用于選擇指定類名的 html 元素，常見使用方法如下：
<div class="nav">
</div>
<style>
.nav {
/*定義 class 為 nav 的元素的樣式*/
}
</style>
包含選擇器
用于選擇層級嵌套的元素，常見使用方法如下：
<div class="nav">
<div class="nav-tools">
</div>
</div>
<div class="nav">
<div>
<div class="nav-tools">
</div>
</div>
</div>
<style>
.nav .nav-tools {
/*定義元素的父級元素 class 包含 nav，且子元素class 包含 nav-tools 的元素*/
}
</style>
需要注意的是：包含選擇器不關心層級，只要后面的選擇器是被包含在前一個元素中的即可。如上述例子，兩個 nav-tools 都會被選擇器選中！
偽類選擇器
:link——鏈接偽類選擇器
用于定義鏈接未被訪問狀態時的樣式，常見使用方法如下：
<div class="nav">
<div class="nav-tools">
<ul>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<style>
a:link {
text-decoration: none;
color: blue;
}
</style>
:visited——鏈接偽類選擇器
用于定義已被訪問的鏈接樣式，常見使用方法如下：
<style>
a:visited {
text-decoration: none;
color: red;
}
</style>
:active——用戶操作偽類選擇器
用于定義被激活的元素樣式，常見使用方法如下：
<style>
a:active {
text-decoration: none;
color: green;
}
</style>
:hover——用戶操作偽類選擇器
用于定義鼠標經過元素是的樣式，常見使用方法如下：
<style>
a:hover {
text-decoration: none;
background-color: #F4F4F4;
}
</style>
:focus——用戶操作偽類選擇器
用于定義獲得焦點的元素樣式，常見使用方法如下：
<style>
input:focus {
text-decoration: none;
background-color: #F4F4F4;
}
</style>
::first-line
用于定義元素內第一行文本的樣式，常見使用方法如下：
<div class="doc">
<p>層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</p>
</div>
<style>
.doc {
width: 360px;
}
.doc>p::first-line {
color: red;
}
</style>
::=first-letter
用于定義元素內第一個字符的樣式，常見使用方式如下：
<style>
.doc {
width: 360px;
}
.doc>p::first-letter {
font-size: 2em;
color: red;
}
</style>
CSS2中定義的選擇器
*——通配選擇器
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。