w3c要求html和css是分離的。html和css的分離，css不再影響html的代碼閱讀，css的複用性高。html和css分離以後，需要通過css選擇器進行選擇上的關聯。
一些選擇器：
id選擇器：#ID名稱
例：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器的使用</title>
<style>
/*id選擇器：#ID名稱*/
#first{
color: red;
}
</style>
</head>
<body>
<ul>
<li id="first">煙臺大學</li>
</ul>
</body>
</html>
類選擇器： . 類名稱
通過類添加的樣式要比通過元素添加的樣式優先級高
例：
<head>
<style>
.odd{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="odd">煙臺大學</li>
<li class="odd">工商學院</li>
<li>文經學院</li>
<li class="odd">泉城學院</li>
</ul>
</body>
</html>
元素選擇器：直接寫元素名稱
元素選擇器會選中當前頁面的所有匹配元素。
例：
<html lang="en">
<head>
<style>
li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>煙臺大學</li>
<li>工商學院</li>
<li>魯東大學</li>
</ul>
</body>
</html>
後代選擇器： 空格 範圍大
子代選擇器： > 範圍小
某些css樣式會被子代甚至後代繼承。有些屬性不會，比如height屬性。
並集選擇器：用,分隔
#earal,#eara2,#eara3{}
通配符選擇器：匹配當前頁面的所有元素
僞類選擇器：用 : 來使用僞類選擇器
<style>
li:nth-child(1){
color:gold;
}
</style>
<style>
li:nth-child(2n-1){
color: red;
}
</style>
<style>
/*hover:浮動*/
td:hover{
background-color: red;
}
</style>