1、id选择器
如以下程序：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #i1{ background-color: #2459a2; height: 48px; } </style> </head> <body> <div id="i1">abcd</div> </body> </html>
id选择器中，标签的id是唯一的，不允许重复
执行结果如下：
2、class选择器
一般使用class选择器，程序如下：
class选择器，class不仅限于一个标签使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ background-color: red; height: 48px; } </style> </head> <body> <div class="c1">abcd</div> <div class="c1">9876</div> </body> </html>
3、div选择器
div标签中的内容显示该属性
<style> div{ background-color: blue; height: 48px; } </style> <div id="i1">abcd</div> <div class="c1">abcd</div>
4、层级选择器
以空格分开，如下：
span div与.c1 div效果一样，都是将8888背景渲染
<style> span div{ background-color: blue; height: 48px; } .c1 div{ background-color: blue; height: 48px; } </style> <span class="c1">qwer<div>8888</div>tyui</span>
5、组合选择器：
以逗号分开，如下：
</style> .c1,.c2,.c3{ background-color: red; height: 48px; } </style> <div class="c1">efgh</div> <div class="c2">ijk</div> <div class="c3">lmn</div>
这时三个div背景全是红色。
6、属性选择器：
input[属性]{渲染背景}
<style> input[type='text']{ 100px; height:200px; } </style> <input type="text" name="user"/> 或者 <style> .c1[type=‘text’]{ 100px; height:100px; } </style> <input class="c1" type="text" />