基础选择器

标签选择器

格式：标签{属性：值;}
特点：标签选择器定义之后，会将页面所有的元素都执行这个标签样式。
示例：

p{
  font-size:20px;
  color:#AA0044;
}

类选择器

格式：.自定义类名{属性:值;}
特点：只对调用他的标签生效，定义格式是class="类名",一个标签可以调用多个类选择器(class="类名1 类名2"), 多个标签可以调用同一个类选择器。
示例:

.box{
  font-size:20px;
  color:#AA0044;
}

ID选择器

格式：#自定义名称{属性:值;}
特点： 一个ID选择器在一个页面只能调用一次（如果使用2次或者2次以上，不符合w3c规范，JS调用会出问题）；一个标签只能调用一个ID选择器，但是一个标签可以同时调用类选择器和ID选择器。
示例:

#box{
  font-size:20px;
  color:#AA0044;
}

通配符选择器

格式：*{属性:值;}
特点：给所有的标签都使用相同的样式。
示例:

*{
  font-size:20px;
  color:#AA0044;
}

注：不推荐使用。

复合选择器

概念：两个或者两个以上的基础选择器通过不同的方式连接在一起。

交集选择器

格式：标签+类(ID)选择器{属性：值;}
特点：即要满足使用了某个标签，还要满足使用了类（或Id）选择器。
示例：

div#box{
  font-size:20px;
  color:#AA0044;
}

后代选择器

格式：选择器+空格+选择器{属性：值;}
特点：后代选择器首选要满足包含（嵌套）关系；父集元素在前边，子集元素在后边；可以无限制隔代，并且只要能代表标签，标签、类选择器、ID选择器自由组合。
示例：

.one #box{
  font-size:20px;
  color:#AA0044;
}

子代选择器

格式：选择器>选择器{属性:值;}
特点：选中直接下一代元素,不能隔代。
示例：

.one>#box{
  font-size:20px;
  color:#AA0044;
}

并集选择器

格式：选择器+，+选择器+，选择器{属性:值;}
特点：多个相同的类或Id具有形同的属性或部分相同的属性。

.one,#box{
  font-size:20px;
  color:#AA0044;
}

属性选择器

CSS 2 引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。

a[href] {
  color:red;
}

注意：选择器尽量不要超过3级。

附录：命名规则

• 不能用纯数字或者数字开头来定义类名。
• 不能使用特殊符号(_ 除外)来定义类名。
• 不推荐使用汉字来定义类名。
• 不推荐使用标签名、属性、属性值来定义类名。