在css中，選擇器是一種模式，用於選擇需要添加樣式的元素。
注意：每行最好只寫一個樣式，而且末尾要使用;分隔。
也就是對聲明分組，一定要在各個聲明的最后使用分號，這很重要。瀏覽器會忽略樣式表中的空白符。
基本選擇器
選擇器的優先級：
id選擇器 > 類選擇器 > 元素選擇器 > 通用選擇器
行內樣式 style屬性中設置的樣式 ，權重最高，優先級最高。
通用選擇器
選擇所有
* {
屬性名：屬性值;
......
}
/*下面的規則可以使文檔中的每個元素都為紅色*/
* {
color: red;
}
元素選擇器
又叫標簽選擇器，選擇指定的元素/標簽
元素名稱 {
屬性名：屬性值;
......
}
div {
width: 100px; /*div的寬度*/
height: 100px; /*div的高度*/
background-color: blue;
}
ID選擇器
選擇指定id屬性值的元素。使用 #
id定義規則：以字母、數字、下划線、中划線組成，不要以數字開頭。id值保持唯一。
#id屬性值 {
屬性名：屬性值;
......
}
#div1 {
width: 100px; /*div的寬度*/
height: 100px; /*div的高度*/
background-color: blue;
}
類選擇器
class類選擇器，選擇設置指定class屬性值的元素，使用 .
.class屬性值 {
屬性名：屬性值;
......
}
.cls1 {
font-weight: bold; /*字體粗細*/
}
分組選擇器
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的,來統一設置元素樣式。
可以將任意多個選擇器分組在一起，對此沒有任何限制。只需要各個選擇器之間使用,分隔即可。
選擇器1,選擇器2,選擇器3,....{
屬性名：屬性值;
......
}
/*為div標簽和p標簽統一設置字體為紅色的樣式*/
div,p{
color:red;
}
實例中應用如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本選擇器</title>
<style>
/*
選擇器的優先級：
id選擇器 > 類選擇器 > 元素選擇器 > 通用選擇器
行內樣式 style屬性中設置的樣式 ，權重最高，優先級最高。
*/
/* 通用選擇器 */
* {
color: orange; /*字體顏色*/
}
/* 元素選擇器 */
div {
width: 100px; /*div的寬度*/
height: 100px; /*div的高度*/
background-color: blue;
}
/* ID選擇器 */
#div1 {
color: #FF0000;
}
/* 類選擇器 */
.cls1 {
font-weight: bold;
}
/* 分組選擇器，為div標簽和p標簽統一設置border樣式 */
#div1, .cls1, span {
border: 2px solid red; /*邊框 邊框的粗細 邊框的風格 邊框的顏色*/
}
</style>
</head>
<!--內容區域：瀏覽器可見內容-->
<body>
<div class="cls1">div1</div>
<div id="div1" class="cls1">div2</div>
<div class="cls1">div3</div><br/>
<span>p</span>
</body>
</html>
顯示效果如下：
組合選擇器
css組合選擇器說明了兩個選擇器直接的關系。
在css中包含了四種組合方式：
后代選擇器（以空格分隔）：選擇指定元素的所有的后代元素
子元素選擇器（以大於號分隔）：選擇指定元素的第一代元素
相鄰兄弟選擇器（以加號分隔）：選擇指定元素相鄰的指定元素（只會向下找一個）
普通兄弟選擇器（以波浪線分隔）：選擇指定元素后的所有指定的同級元素（向下找所有指定的同級的）
后代（派生）選擇器
用於選擇指定標簽元素下的后輩元素，以空格分隔
選擇器1 選擇器2 {
.....
}
/*匹配class="food"標簽里面的所有的li*/
.food li {
/*邊框 邊框的粗細 邊框的風格 邊框的顏色*/
border: 1px solid red;
}
子元素選擇器
用於選擇指定標簽元素的所有第一代子元素，以大於號分隔
選擇器1 > 選擇器2 {
.....
}
#d > div {
border: 1px solid red;
}
相鄰兄弟選擇器
選擇指定元素相鄰的指定元素（只會向下找一個）。以加號分隔
選擇器1 + 選擇器2 {
.....
}
#d + div {
border: 1px solid red;
}
普通兄弟選擇器
選擇指定元素后的所有指定的同級元素（向下找所有指定的同級的）。以波浪線分隔
選擇器1 ~ 選擇器2 {
.....
}
#d ~ div {
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>組合選擇器</title>
<style type="text/css">
/* 后代選擇器： 一級列表,二級列表都有效果*/
.food li {
border: 1px solid red;
}
/* 子元素選擇器：只有一級列表有效果*/
.food > li {
border: 1px solid red;
}
/* 相鄰兄弟選擇器 */
#d + div {
color: #FF0000;
}
/* 普通兄弟選擇器 */
#t ~ li {
color: blue;
}
</style>
</head>
<!--內容區域：瀏覽器可見內容-->
<body>
<h2>食物</h2>
<ul class="food"> <!--列表嵌套-->
<li>水果 <!--一級列表-->
<ul> <!--二級列表-->
<li>黃瓜</li>
<li>蘋果</li>
<li>聖女果</li>
</ul>
</li>
<li>堅果 <!--一級列表-->
<ul> <!--二級列表-->
<li>開心果</li>
<li>夏威夷果</li>
<li>碧根果</li>
</ul>
</li>
</ul>
<div id="d">
相鄰兄弟選擇器1
<ul>
<li>沈騰</li>
<li>賈玲</li>
</ul>
</div>
<div>
相鄰兄弟選擇器2
</div>
<p>
相鄰兄弟選擇器3
</p>
<div>
普通兄弟選擇器
<ul>
<li id="t">綜藝</li>
<li>王牌對王牌</li>
<li>青春環游記</li>
<li>向往的生活</li>
</ul>
</div>
</body>
</html>
顯示結果：
應用后代選擇器：
應用子元素選擇器：
應用相鄰選擇器：
應用普通兄弟選擇器：
