css中有四种基本选择器，就一般开发而言，css一般采用clss选择器进行dom样式编辑，而id则交给js进行一些逻辑交互处理（也有不少例外，这里是一般习惯来说，并没有特别严格的标准）。
!important > 行内选择器 > id选择器 > 类选择器 > 标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> span{ color: red; } /*标签选择器*/ div { margin: 0 auto; } /*class选择器*/ .cla { background-color: red; } /*id选择器*/ #my_id { background-color: blue; } </style> </head> <body> <!-- 行内选择器style --> <div class="cla" id = "my_id" style="background-color:yellow">学完了安卓，继续学<span>前端</span>哟</div> </body> </html>其他选择器
1. 后代选择器
该选择器指向的是某节点的某个后代结点，使用选择器之间有空格分隔例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .d1{ background-color: pink; } .d1 .d2 { // 选择的是.d1的后代节点.d2 color: yellow; } </style> </head> <body> <div class="d1"> <div class="d2">我是后代1</div> <div class="d3">我是后代2</div> </div> </body> </html>
2. 交集选择器
交集选择器的写法为： 选择器A选择器B ，两个选择器之间是连起来的，没有分隔。指向既满足选择器A且满足选择器B的元素结点
// 交集选择器 div.d3 { color: green; }3. 并集选择器
并集选择器的写法：用逗号隔开。
.d2, .d3{ background-color: red ; }4、伪类选择器
其对应几种不同的状态：
link：超链接点击之前（对于<a>标签）visited：超链接点击之后（对于<a>标签）focus：是某个标签获得焦点的时候（比如某个输入框获得焦点）hover：鼠标放到某个标签上的时候active：点击某个标签没有松鼠标时
5. 子代选择器
与后代选择器不同的是，子代选择器只选择到第一代。使用 父节点选择器 > 子结点选择器 的写法。
.d1>d2{ background-color: pink; }
6. 兄弟选择器
兄弟选择器表示两个并列的结点，通过某结点选择到它的下一个兄弟结点。使用 “+” 号分隔。
.d2+.d3{ font-size: 28px; }
7. 序选择器
通过 XXX:first-child 选择XXX下的第一个子代结点；通过 XXX:last-child 选择XXX下的最后一个子代结点。
<style type="text/css"> ul li:first-child{ //选择第一个子元素 color:red; } ul li:last-child{ //选择最后一个子元素 color:red; } </style> <ul> <li class="first">项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li>项目</li> <li class="last">项目</li> </ul>
