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>