涉及到的选择器有：标签选择器，类选择器，ID选择器，通配符选择器。
标签选择器
使用HTML标签名称作为选择器，使用此选择器可以页面中某一类标签指定统一的css样式。
语法：
标签名 {
属性:属性值;
...
}
举例：
比较典型的是，为页面中所有的超链接a标签去掉下换线。
a {
text-decoration:none;
}
优缺点：
优点：
能够快速为页面中同类型的标签统一样式。
缺点：
不能差异化选择不同的标签，比如说我想有一个选择器同时选div和span标签，怎么办？
类选择器
听这个选择器的名字就知道了，可以用它来选择一类的标签。
使用：
html：我们使用class属性来为html标签指定它所属的类。
<div class="head">我属于head类</div>
<span class="head">我属于head类</span>
<div class="body">我属于body类</div>
css：可以看到上面使用class属性为html标签指定了两个类，如果我们需要对head类的标签指定样式，可以这样写。
.head {
属性:属性值;
....
}
/* 如果是body类 */
.body {
属性:属性值;
....
}
注意：
-
使用class属性指定的类名是有命名规范的。
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名， 尽量使用英文字母来表示。
-
可以为同一个标签设置多个类。例如下面的div指定了两个类，这样这个div就会拥有两个类中所指定的样式。并且如果某一样式重复指定，浏览器会优先使用后面的类所指定的样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test-class-one { border: 1px solid #000; height: 50px; width: 50px; } .test-class-two { height: 200px; width: 200px; } </style> </head> <body> <div class="test-class-one test-class-two">我是测试div</div> </body> </html>
ID选择器
这个id由我们为页面的标签指定，是它的唯一标识。所以，同一个页面中的id不能重复。
通过id选择器我们可以精准地选择某一个标签。
指定id
<div id="idTest">我有唯一的id</div>
使用id选择器选择这个标签
#idTest {
属性:属性值;
...
}
通配符选择器
使用 * 通配所有标签，为所有标签指定一个统一的样式。
最典型的使用：
去除所有标签的内外边距。某一些标签会有默认的内外边距，如果不使用下面的css代码来进行去除，在我们布局的时候可能会受到影响。
* {
margin: 0;
padding: 0;
}
注意：
通配符选择器会匹配页面所有的元素，降低页面响应速度，不建议随便使用
基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | p { color：red;} |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav { color: red; } |
| id选择器 | 一次只能选择器1个标签 | 只能使用一次 | 不推荐使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
基础选择器我们一共学了4个， 每个都有自己的价值， 可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。
团队约定
选择器
- 尽量少用通用选择器
- 尽量少用 ID 选择器
- 不使用无具体语义定义的标签选择器 div span
/* 推荐 */
.jdc {}
li {}
p{}
/* 不推荐 */
*{}
#jdc {}
div{} 因为div 没有语义，我们尽量少用