css选择器

1、标签选择器

选择所有标签

*{
     color:red;
}

div{
  color:green;
}

2、id选择器

id须唯一，不能重复 用的不多

#div1{
   color:gold;
}

<div id='div1'>这是第一个div</div>

3、类选择器

用的最多

.green{
    color:green;
}

.big{
	font-size:40px;
}

<div class='green big'>这是第一个div</div>
<div class='green'>这是第二个div</div>

4、层级选择器

.box{
		font-size:20px;
		line-height;30px;
		text-indent:40px;
}

.box  span{
		color:red;
		font-weight:bold;
}

类box下的span标签对应的样式

.box  .span{
		color:blue;
}

两个类选择器的嵌套

5、主选择器

三个类选择器中的相同内容

.box01，.box02，.box03{
		font-size:20px;
		text-indent:40px;
}

三个类选择器中的不同内容

.box01{
		color:red;
}

.box02{
		color:green;
}

.box03{
		color:gold;
}

6、伪类和伪元素选择器

伪类选择器通常用在链接上

.link{
		font-size:40px;
		color:green;
		text-decoration:none;
}

.link;hover{
		color:gold;
		font-weight:bold;
}

鼠标悬停所显示的样式。

伪元素选择器通常用于调试bug

.box:before{
		content:"在类选择器选择的标签前加入的内容";
}
.box:after{
		content:"在类选择器选择的标签后加入的内容"
}