HTML选择器详解

id选择器：

id选择器的用法：

定义：

注意：id定义是不能重复

<标签 id="id名"></标签>

选择器：

设置该id对应的标签中的内容。

#id名{
	属性；
	属性；
	......
}

class选择器：

定义：

class选择器可以重名(一次设置好几个),可以重名，且不能以数字开头。

<标签 class="class名"></标签>

选择器：

设置该class对应的所有的标签中的内容。

.class名{
	属性值；
	属性值；
	......
}

交集选择器：

用法：

假设有定义如下的标签：

<p class="p1" id="pp1">hello!</p>
<p class="p1">hello!</p>

使用：

.p1#pp1{/*(各个选择器不分隔)*/
	width: 500px;
	background-color: aquamarine;
}

可以修class=p1,且id=pp1的标签的内容，只满足其中一个的不会被修改。

并集选择器：

用法：

假设有定义如下的标签：

<p class="p2">hello!</p>
<p class="p3">hello!</p>

使用：

.p2,.p3{/*使用 ， 分割*/
	background-color: coral;
}			

可以修class=p2,和class=3的标签的内容。

后代选择器：

用法：

假设有定义如下的标签：

<div id="box2">
	<p>onen404</p>
</div>

用法：

#box2 p{/*与后低标签之间用空格隔开，即修改box中的p标签中的内容*/
	color: red;
}

子类选择器：

假设有定义如下的标签：

我们想要只修改div中p的属性，即修改onen的属性，就可以用到子类选择器：

<div id="box1">
	<p>onen</p>
	<div>
		<p>onen112</p>
	</div>
</div>

用法：

#box1>p{/*仅修改onen的样式即仅修改子辈的属性*/
	color: blue;
}

伪类选择器

伪类选择器：（使用时需要按照以下顺序）
a:link{属性: 属性值；}超链接的初始状态
a:visited{属性：属性值；}超链接被访问后的状态
a:hover{属性：属性值；}鼠标悬停，鼠标划过超链接的状态
a:active{属性：属性值；}超链接被激活时的状态，即鼠标按下时超链接的状态

用法：

a:link{
	color: red;
}
a:visited{
	color: aquamarine;
}
a:hover{
	color: darkgoldenrod;
}
a:active{
	color: pink;
}