CSS選擇器：
css的選擇器可以分為以下幾類：
1、元素選擇器：
最常見的 CSS 選擇器是元素選擇器。換句話說，文檔的元素就是最基本的選擇器。如果設定 HTML 的樣式，選擇器通常将是某個 HTML 元素，比如 p、hn、span、a，甚至可以是 html 本身。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*找到h1這個标簽*/
h1{
color: red;
background-color: #ccc;
}
/*找到p标簽*/
p{
font-size: 25px;
}
</style>
</head>
<body>
<h1>這個一級标題</h1>
<p>這是一段文字</p>
<h2>這是二級标題</h2>
</body>
</html>
2、群組選擇器：
要為不同的HTML對象定義相同的樣式時，群組選擇器可以減少樣式的重複定義。可以把任意數量、任意類型的選擇器放在群組中進行聲明。每個對象之間用逗号來分隔。逗号告訴浏覽器，規則中包含兩個不同的選擇器。這樣的選擇器叫群組選擇器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*選擇頁面中的這些标簽,設定字型為紅色*/
h1,div,p,a{
color: red;
}
</style>
</head>
<body>
<h1></h1>
<div></div>
<p></p>
<a href="#"></a>
</body>
</html>
3、類選擇器：
該選擇器可以單獨使用,也可以與其他元素結合使用。 提示:隻有适當地标記文檔後,才能使用這些選擇器,是以使用這兩種選擇器通常需要先做一些構想和計劃。 要應用樣式而不考慮具體設計的元素,最常用的方法就是使用類選擇器。使用方法是需要現在标簽中添加class屬性，然後給其命名一個名字，在寫樣式的時候 .xxx{color：red}。“.”是類選擇器文法申明的一部分，xxx是自己命名的名字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*找到頁面中所有class為color的元素*/
.color{
text-align: center;
color: #666;
}
</style>
</head>
<body>
<p>這是一段文字</p>
<p class="color">這是一段文字</p>
<div>
<span class="color"></span>
</div>
<a href="#" class="color"></a>
</body>
</html>
4、ID選擇器：
id 選擇器可以為标有特定 id 的 HTML 元素指定特定的樣式。且是 标簽的唯一辨別 、獨一無二的樣式設計，一個HTML頁面中的id名字最好是不能重複，雖然并沒有明确規定說不可以，但是如果重複就會出現樣式重疊，最後就隻會渲染最後申明的樣式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*找到頁面中id為two的元素*/
#two{
text-align: center;
color: #666;
}
</style>
</head>
<body>
<p>1</p>
<p id="two">2</p>
<p>3</p>
<p>4</p>
</body>
</html>
5、屬性選擇器：
屬性選擇器可以根據元素的屬性及屬性值來選擇元素，說簡單點就是通過某些元素自身預設的屬性，來去選擇這個元素，比如說a标簽的href屬性，我們就可以這樣來找到a标簽:
<html>
<style>
[href]{
/*去掉下劃線*/
text-decoration: none;
}
</style>
</html>
6、後代選擇器：
後代選擇器又稱為包含選擇器，隻要具備層級關系的元素，被嵌套的都可以被稱為後代元素，一般的用法就是：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*每個标簽名中間用空格隔開*/
div ul li a{
color: red;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="">後代選擇器</a>
</li>
</ul>
</div>
</body>
</html>
7、子元素選擇器：
與後代選擇器相比,子元素選擇器(Child selectors)隻能選擇作為某元素子元素的元素。選擇子元素，僅是指它的直接後代，或者你可以了解為作用于子元素的第一代後代。而後代選擇器是作用于所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。如果您不希望選擇任意的後代元素,而是希望縮小範圍,隻選擇某個元素的子元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*找到div的子元素p,将1和2找到*/
div>p{
color: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<ul>
<li>
<p>2</p>
<p>3</p>
</li>
</ul>
<p>4</p>
</div>
</body>
</html>
8、相鄰兄弟選擇器：
如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器，相鄰兄弟選擇器使用了加号（+），即相鄰兄弟結合符：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*将a标簽中的文字設為紅色*/
h1+a{
color: red;
}
</style>
</head>
<body>
<div>
<p>1</p>
<h1>2</h1>
<a href="">紅色</a>
</div>
</body>
</html>
9、僞類選擇器:
僞類:同一個标簽,根據其不同的種狀态,有不同的樣式。這就叫做“僞類”。僞類用冒号來表示。 靜态僞類和動态僞類兩種。CSS 僞類用于向某些選擇器添加特殊的效果:
(1)靜态僞類：隻能用于超連結的樣式。如下：
:link 超連結點選之前
:visited 連結被通路過之後
注意：以上兩種樣式，隻能用于超連結。
(2)動态僞類：針對所有标簽都适用的樣式。如下：
:hover “懸停”：滑鼠放到标簽上的時候
:active “激活”： 滑鼠點選标簽，但是不松手時。
:focus 是某個标簽獲得焦點時的樣式（比如某個輸入框獲得焦點）
10、通用選擇器：
通用選擇器可以選擇頁面上的所有元素，并對它們應用樣式，用 * 來表示。
一般我們可以用其進行一些樣式的預設，還有清除浏覽器的預設樣式，用法就是直接 *{margin：0px; padding：0px;}。
![4.1 Jsoup解析[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)