CSS选择器总结及其注意事项（十）

基础选择器

1.1 标签选择器

• 概念：
  标签选择器（元素选择器）是指HTML中标签名称作为选择器，按标签名称分类，为页面之中某类标签指定的统一CSS样式。

• 语法：

 标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;属性4:属性值4;}

• 作用：
  标签选择器 可以把某一类标签全部选择出来
• 优点：
  能够快速为页面中间类型的标签统一样式
• 缺点：
  不能设计差异化样式

1.2 类选择器

• 语法

    <!--  标签  -->
<p class="类名">内容</p>

/*类名选择器*/
.类名{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	属性4:属性值4;
}

• 优点：
  可以为元素对象定义单独胡总和相同的样式。可以选择一个或者多个标签

• 注意：
  类选择器用（英文状态下）"."，后面跟类名
  长名称或者词组可以用中横线来命名
  不能以纯数字、中文命名（也不可以使用数字做类名开头），尽量使用英文字母
  如需查看完整命名规范点击如下链接跳转
  css选择器命名规范

• 扩展：
  多类名

<p class="类名1 类名2  类名3">内容</p>

1.3 id选择器

• 语法：

   <!--  标签  -->
<p class="id名">内容</p>

/*id选择器*/
#id名{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	属性4:属性值4;
}

• 注意：
  id选择器用#进行标识，后面跟id名
  元素id值是唯一的，只能对应文档中某一个元素

1.4 通配符选择器

• 概念：
  通配符选择器用*号表示，*就是选择所有的标签，他是所有选择器中作用范围最广的、能匹配页面中所有的元素。

• 语法：

/*通配符选择器*/
*{
	属性1:属性值1;
	属性2:属性值2;
	属性3:属性值3;
	属性4:属性值4;
}

• 注意：
  会匹配到页面所有元素，会降低页面响应速度，不建议随便使用

1.5 总结

• 尽量少使用通配符选择器
• 尽量少使用id选择器
• 不适用无具体语义定义的标签选择器