所謂選擇器，指的是選擇施加樣式
3.1元素選擇器
用標籤名作爲選擇器，選中所相應的元素
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
div{
font-size: 24px;
color: blue;
}
p{
font-size: 36px;
color: red;
}
</style>
</head>
<body>
<div>元素選擇器</div>
<p>元素選擇器1</p>
<p>元素選擇器2</p>
</body>3.2id選擇器
根據id來選擇元素，其樣式定義形式爲：
#idname{
…….
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
}
#div1{
width: 200px;
height: 200px;
background-color: red;
}
#div2{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>3.3類選擇器
根據class屬性來選擇元素，其樣式定義爲：
.classname{
……
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.even{
width: 200px;
height: 200px;
background-color: red;
}
.odd{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="odd"></div>
<div class="even"></div>
<div class="odd"></div>
</body>從結果可以看出：.odd{…..}定義的樣式會施加到所有class=”odd”的元素上，比如上例中的第一個和第三個<div>，當然也包括class=”odd”的<p>
3.4屬性選擇器
根據某個屬性的特性來選擇
（1）根據有無某屬性來選擇
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title]{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>從結果可以看出，所有具有title屬性的元素都應用了紅色背景色的樣式。
（2）根據屬性的值來選擇
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
[title='div2']{
width: 100px;
height: 50px;
background-color: red;
border: 1px solid green;
}
</style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div >3</div>
<div title="a div">4</div>
<div title="div a">5</div>
</body>從結果可以看出，只有第二個div應用了紅色背景的樣式，因爲只有第二個div的title屬性等於div2
title ~=’div’:選中屬性值包含指定完整單詞的元素,類似word中的全字匹配
title ^= ‘div’:選中title屬性值以’div’開頭的元素
title $= ‘div’:選中title屬性值以’div’結尾的元素
title *= ‘div’:選中title屬性值包含’div’的元素
3.5結構選擇器
(1)後代選擇器：可以選擇一個元素的後代進行選擇。
案例：
<style type="text/css">
.content a{
font-size: 30px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.content a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龍江省氣象服務中心今天11時發佈交通天氣預報</h1>
<div class="content">
<p> 受冷渦影響，今天我省<span><a href="">東部</a></span>區域仍將有<a href="http//www.heilongjiangdu.com">雷陣雨天氣</a>，降水的地方,提醒您注意做好防暑降溫工作。</p>
<a href="http//www.heilongjiangdu.com">前往現場</a>
</div>
<a href="http//www.heilongjiangdu.com">查看原文</a>
</body>（2）子元素選擇器：通過某元素選中直接後代元素。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.content >a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龍江省氣象服務中心今天11時發佈交通天氣預報</h1>
<div class="content">
<p> 受冷渦影響，今天我省<span><a href="">東部</a></span>區域仍將有<a href="http//www.heilongjiangdu.com">雷陣雨天氣</a>，降水的地方,提醒您注意做好防暑降溫工作。</p>
<a href="http//www.heilongjiangdu.com">前往現場</a>
</div>
<a href="http//www.heilongjiangdu.com">查看原文</a>
</body>3.6並選擇器
將相同的樣式放在一起，類名直接用英文逗號分隔。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.div1,.din2{
position: relative;
width: 100px;
height: 100px;
}
.div1{
border: 1px solid blue;
}
.din2{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="div1">我是div1</div>
<div class="din2">我是div2</div>
</body>3.7通配符選擇器
通配符選擇器選中頁面所有的標籤（任何元素）
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>黑龍江省氣象服務中心今天11時發佈交通天氣預報</h1>
<div class="content">
<p> 受冷渦影響，今天我省<span><a href="">東部</a></span>區域仍將有<a href="http//www.heilongjiangdu.com">雷陣雨天氣</a>，降水的地方,提醒您注意做好防暑降溫工作。</p>
<a href="http//www.heilongjiangdu.com">前往現場</a>
</div>
<a href="http//www.heilongjiangdu.com">查看原文</a>
</body>注意：通配符選擇器對頁面所有的的元素都會設置對應的樣式，而是實際上呢，有很多元素默認是不帶任何的樣式的。
3.8兄弟選擇器
（1）選中離自己最近的一個下一級元素。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to + a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龍江省氣象服務中心今天11時發佈交通天氣預報</h1>
<div class="content">
<a href="http//www.heilongjiangdu.com">前往現場0</a>
<a class="go-to" href="http//www.heilongjiangdu.com">前往現場1</a>
<a href="http//www.heilongjiangdu.com">前往現場2</a>
<a href="http//www.heilongjiangdu.com">前往現場3</a>
</div>
</body>（2）選中所有下一級元素。
案例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.go-to ~ a{
font-size: 30px;
}
</style>
</head>
<body>
<h1>黑龍江省氣象服務中心今天11時發佈交通天氣預報</h1>
<div class="content">
<a href="http//www.heilongjiangdu.com">前往現場0</a>
<a class="go-to" href="http//www.heilongjiangdu.com">前往現場1</a>
<a href="http//www.heilongjiangdu.com">前往現場2</a>
<a href="http//www.heilongjiangdu.com">前往現場3</a>
</div>
</body>3.9僞類、僞元素選擇器
僞類：根據元素不同的狀態，自動選擇不同的樣式。(僞類用於向某些選擇器添加特殊的效果。)
僞元素：僞元素用於將特殊的效果添加到某些選擇器。
僞類的效果可以通過添加一個實際的類來達到，而僞元素的效果則需要通過添加一個實際的元素才能達到，這也是爲什麼他們一個稱爲僞類，一個稱爲僞元素的原因。
（1）僞類選擇器：
條件一、根據元素不同的狀態，自動選擇不同的樣式。
或條件二、直接添加一個class，給這個class設定特殊的樣式。
a:hover：鼠標劃過的時候添加樣式
a:active：被激活的時候添加樣式
a:link：鏈接地址未被訪問時候添加的狀態
a:visited：鏈接地址點擊之後添加顏色。必須設置href屬性。
焦點
input：focus：擁有鍵盤輸入獲取焦點時候添加的樣式。
（2）.僞元素選擇器：
（2.1）需要設置特殊效果的內容放到元素（標籤）裏面span
（2.2）在添加一個class，對class設置特殊樣式