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>