标签：指定   语法   title   快速   价值   通过   规范   charset   doc   

涉及到的选择器有：标签选择器，类选择器，ID选择器，通配符选择器。

标签选择器

使用HTML标签名称作为选择器，使用此选择器可以页面中某一类标签指定统一的css样式。

语法：

标签名 {
  属性:属性值; 
  ...
} 

举例：

比较典型的是，为页面中所有的超链接a标签去掉下换线。

a {
    text-decoration:none;
}

优缺点：

优点：

能够快速为页面中同类型的标签统一样式。

缺点：

不能差异化选择不同的标签，比如说我想有一个选择器同时选div和span标签，怎么办？

类选择器

听这个选择器的名字就知道了，可以用它来选择一类的标签。

使用：

html：我们使用class属性来为html标签指定它所属的类。

我属于head类
我属于head类
我属于body类

css：可以看到上面使用class属性为html标签指定了两个类，如果我们需要对head类的标签指定样式，可以这样写。

.head {
    属性:属性值;
    ....
}
/* 如果是body类 */
.body {
   属性:属性值;
   .... 
}

注意：

1. 使用class属性指定的类名是有命名规范的。

   • 长名称或词组可以使用中横线来为选择器命名。
   • 不要纯数字、中文等命名， 尽量使用英文字母来表示。

2. 可以为同一个标签设置多个类。例如下面的div指定了两个类，这样这个div就会拥有两个类中所指定的样式。并且如果某一样式重复指定，浏览器会优先使用后面的类所指定的样式。

   
   
   
   
   我是测试div
   
   
   

ID选择器

这个id由我们为页面的标签指定，是它的唯一标识。所以，同一个页面中的id不能重复。

通过id选择器我们可以精准地选择某一个标签。

指定id

我有唯一的id

使用id选择器选择这个标签

#idTest {
	属性:属性值;
	...
}

通配符选择器

使用 * 通配所有标签，为所有标签指定一个统一的样式。

最典型的使用：

去除所有标签的内外边距。某一些标签会有默认的内外边距，如果不使用下面的css代码来进行去除，在我们布局的时候可能会受到影响。

* {
	margin: 0;
    padding: 0;
}

注意：

通配符选择器会匹配页面所有的元素，降低页面响应速度，不建议随便使用

基础选择器总结

基础选择器我们一共学了4个， 每个都有自己的价值， 可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。

团队约定

选择器

• 尽量少用通用选择器
• 尽量少用 ID 选择器
• 不使用无具体语义定义的标签选择器 div span

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用

css 基础选择器

标签：指定   语法   title   快速   价值   通过   规范   charset   doc   

原文地址：https://www.cnblogs.com/frontendengineer/p/13218309.html