基础选择器

标签选择器

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

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级。

附录:命名规则

  • 不能用纯数字或者数字开头来定义类名。
  • 不能使用特殊符号(_ 除外)来定义类名。
  • 不推荐使用汉字来定义类名。
  • 不推荐使用标签名、属性、属性值来定义类名。
Last modification:February 24, 2018
If you think my article is useful to you, please feel free to appreciate