CSS基础选择器

CSS选择器的作用就是找到HTML特定的页面元素，并为其添加样式。选择器分为基础选择器和复合选择器。

标签选择器

标签选择器（元素选择器）是指以HTML标签名称作为依据选择器，为页面中某一类标签指定统一的CSS样式。其基本语法为：

<style>
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 
</style>

缺点：不能对元素单独使用样式。

类选择器

1. 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）。

<style>
  .类名 {   
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;     
}
</style>

页面元素可使用 class 属性来调用该样式。

<p class='类名'></p>

使用类选择器，即可为元素定义单独或相同的样式。

1. 类名的命名规范

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

2. 多类名，在一个标签内部只能定义一个 class 属性，如果需要给标签指定多个类名，就要使用多类名写法。如：

   <div class="pink fontWeight font20">亚瑟</div>
   

注意：各个类名中间用空格隔开。

ID选择器

1. id选择器使用#进行标识，后面紧跟id名，如：

<style>
  #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>

页面元素可使用 id 属性来调用该样式。

<p id="id名"></p>

注意：元素的id值是唯一的，只能对应于文档中某一个具体的元素。

1. id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。即id选择器和类选择器最大的不同在于使用次数上。

• 类选择器在修改页面样式中，用的最多。
• id选择器一般用于页面唯一性的元素身上，经常与javascript 搭配使用。

通配符选择器

通配符选择器用*号标识，可以选中页面的所有标签，如：

<style>
  * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
</style>

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

总结