css选择器的类型

css选择器

通过选择器给元素添加样式或进行操作。

6种选择器

• id选择器
• 标签选择器
• 类选择器
• 属性选择器
• 继承选择器

1.id选择器

id选择器是唯一的，不能有两个相同的id选择器。

//html
<div id="identityDocument">id选择器是身份证标识，唯一编码。</div>
//css
#identityDocument {backgrond: green;}

2.标签选择器

标签选择器，使用标签选择器会选中所有使用该标签名的元素来进行添加样式

//html
<div>div标签选择器</div>
<p>标签选择器</p>
<div>标签选择器</div>
//css
div {background:red;}

3.类选择器

类选择器，可以随便给选择器添加想要的别名，使用该别名的标签会进行添加样式

//html
<div class="class">类选择器</div>
<div class="">类选择器</div>
//css
.class {background:gray;}

4.伪类选择器

类选择器的名是特定的，获取css元素的状态或者属性

//html
<a>伪类选择器，:active;:focus;:hover;:link;:visited;:lang;:after;:before;</a>
//css
a:active {}
a:focus{}
//鼠标悬浮时
a:hover{}
//链接
a:link{}
a:visited{}
//语言
a:lang{}
//元素之后
a:after{}
//元素之前
a:before{}

5.属性选择器

属性选择器，属性和值一起选择，被选中的添加样式

//html
<input value="val"><input>
<input value="val"><input>
//css
input [value='val'] {background:blue;}

6.结构选择器

结构选择器，通过后代，父子，兄弟进行选择添加样式

//html
<div id="box">
	<div class="centent">
		<div class="info">信息</div>
		<div class="detail details">详情</div>
	</div>
</div>
//css
//使用后代选择器"."
#box .info {color:red;}

//使用父子选择器">"
.centent > detail {color:blue;}

//使用兄弟选择器">"
.info + .detail {background:pink;}
//也可以使用
.detail.details{}