1、CSS选择器:
CSS选择器用来控制html中元素标签的样式,多用于表示标签的属性，比如颜色，宽高等属性。如图:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ margin-top:20px; /*上边距*/ background-color: red; /* 背景颜色 */ width: 100px; /*宽度*/ height: 100px; /*高度*/ } .box{ margin-top:20px;/*上边距*/ background-color: green; /* 背景颜色 */ width: 200px; /*宽度*/ height: 200px; /*高度*/ } </style> </head> <body> <div id="box">ID选择器盒子</div> <div class="box">class选择器盒子</div> <div class="box">class选择器盒子</div> <div class="box">class选择器盒子</div> <div class="box">class选择器盒子</div> <div class="box">class选择器盒子</div> </body> </html>
上面简单介绍了id选择器和类选择器，除了上述选择器还包括
1.标签选择器
2.后代选择器
3.子选择器
4.伪类选择器
| 伪类选择器 | 效果 |
|---|---|
| hover | 匹配鼠标悬停其上的元素 |
| visited | 匹配所有已被点击的链接 |
| link | 匹配所有未被点击的链接 |
| active | 匹配鼠标已经在其上按下 但是还没有释放的元素 |
5.通用选择器
6.群组选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /*通用选择器 针对所有元素 一般用来清除所有的元素样式*/ *{ margin: 0; /*清除所有外边距*/ padding: 0;/*清除所有内边距*/ box-sizing: border-box;/*border不占空间*/ } /*标签选择器*/ h1 { color:red; /*文字颜色 红色*/ } /*后代选择器 只对 h2 元素中的 em 元素应用样式*/ h2 em { color: blue; } /*子选择器 只针对子元素 不针对子元素以下的元素*/ h3 > strong { color: green; } /*伪类选择器 hover 鼠标悬浮时颜色改变 离开后还原*/ h4:hover{ color:pink; } /*群组选择器*/ h5,h6{ color:purple; } </style> </head> <body> <h1>标签选择器</h1> <h2><em>后代选择器</em></h2> <h3><strong>子选择器</strong></h3> <h3><em><strong>子选择器的错误用法</strong></h3> <h4>请将鼠标移入</h4> <h5>群组选择器</h5> <h6>群组选择器</h6> </body> </html>
2、CSS选择器权重:
当我们多个选择器设置了同一元素的样式的时候，标签的样式会根据选择器的权重来决定显示的样式，比如同一元素的class和id同时设置了样式，那么这个标签的样式为ID设置的样式，因为ID选择器的权重100而类选择的权重只有10
| 类型 | 权重 |
|---|---|
| ! important | 无穷 |
| 行间样式 | 1000 |
| id | 100 |
| class/属性选择器/伪类 | 10 |
| 标签选择器 | 1 |
| 通配符 | 0 |
3、CSS非布局样式
原文：https://www.cnblogs.com/qianduan888/p/12317166.html