結構選擇器
寫法：E F
案例：
<html>
<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>中央氣象臺繼續發佈高溫橙色預警</h1>
<div class="content">
<p>預計南、<span><a href="#">重慶</a></span>地有<a href="#">35℃</a>以上的高溫地的部分地區最高氣溫可達37-39 ℃</p>
<a href="#">前往現場</a>
</div>
<a href="#">查看原文</a>
</body>
</html>
（2）子元素選擇器：通過某一個元素選中直接後代元素
寫法：E > F（‘>’英文狀態下輸入）
案例：
.content > a{
font-size:30px;
}
<body>
<h1>中央氣象臺繼續發佈高溫橙色預警</h1>
<div class="content">
<p>預計南、<span><a href="#">重慶</a></span>地有<a href="#">35℃</a>以上的高溫地的部分
地區最高氣溫可達37-39 ℃</p>
<a href="#">前往現場</a><a href=”#”>前往現場2</a>
</div>
<a href="#">查看原文</a>
</body>
（3）並選擇器：將相同的樣式放在一起，類名直接用英文逗號分隔
寫法：E,F（中間用英文的逗號分隔）
案例
.div1,.div2{
width: 100px;
height: 100px;
}
.div1{
border:1px solid yellow;
}
.div2{
border:1px solid blue;
}
</head>
<body>
<div class="div1">
我是div1
</div>
<div class="div2">
我是div2
</div>
</body>
通配符選擇器
通配符選擇器可以選中頁面中的所有標籤
寫法：*{}
案例：
*{
margin:0;
padding:0;
}
對上一個案例加上這一行代碼
注意：通配符選擇器對頁面所有的元素都會設置對應的樣式，而實際上呢，有很多元素默認是不帶任何的樣式的。
兄弟選擇器
（1）寫法：E + F：選中最近的一個“弟弟”元素。不選中自己。
.go-to + a{
font-size:30px;
}
<body>
<h1>中央氣象臺繼續發佈高溫橙色預警</h1>
<div class="content">
<a class="go-to" href="http://www.huadianedu.com">前往現場</a>
<a href="http://www.huadianedu.com">前往現場2</a>
<a href="http://www.huadianedu.com">前往現場3</a>
</div>
<a href="#">查看原文</a>
</body>
（2）寫法E~F：選中所有的“弟弟”元素。不選中自己。
.go-to ~ a{
font-size:30px;
}
僞類與僞元素選擇器
1僞類選擇器：
條件一、根據元素的不同的狀態，自動選中不同的樣式。
或條件二、直接添加一個class，給這個class設定特殊的樣式。
li:first-child;li:last-child;li:only-child;
a:hover:鼠標劃過的時候添加樣式
a:active:被激活的時候添加樣式。點擊那一刻（按住鼠標左鍵不放）須放在a:link後面。
a:link:鏈接地址未被訪問時候添加的狀態。必須設置href屬性。
a:visited:連接地址點擊之後添加樣式。必須設置href屬性。(它們有特定的順序LVHA）
input:focus:擁有鍵盤輸入獲取焦點時候添加的樣式。
2僞元素選擇器：
(2.1)需要設置特殊效果的內容放到一個元素（標籤）裏面span
(2.2)再添加一個class，對class設置特殊樣式。
p:first-letter;p:first-line;p:before;p:after
li:after{
content:"。";
color:blue;
}
