CSS选择器类型总结

 

1.通用选择器

 

一般用于给所有元素做一些通用性的样式设置，比如清除内边距、外边距等。但是效率比较低，尽量不要使用。

 

* {

  margin: 0;

  padding: 0;

}

 

2.元素选择器

 

也叫做“标签选择器”，用于选中一类标签进行样式设置。

 

div { color: #ff0000; }

span { font-size: 18px; }

 

3.类选择器

 

给元素添加class属性，通过.class属性值来选中元素。

一个元素可以有多个class值，每个class值之间用空格隔开；

class值如果由多个单词组成，单词之间可以用中划线-、下划线_，也可以使用驼峰标识；

最好不要用标签名作为class值；

.box {

  width: 100px;

  height: 100px;

  background-color: #ff0000;

}

<div class="box"></div>

 

4.id选择器

给元素添加id属性，通过#id属性值来选中元素。

 

一个HTML文档里面的id值是唯一的，不能重复；

id值如果由多个单词组成，单词之间可以用中划线-、下划线_，也可以使用驼峰标识；

最好不要用标签名作为id的值；

#container { color: #ff0000; }

<div id="container"></div>