持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情

前言

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成，用来指定要为哪个 HTML 元素定义样式。它是非常灵活的一个方式，是学习css必不可少的。下面总结一下css的选择器种类。

选择器种类

id选择器

这个是特别基础的一个了，在我们的html标签上，定义好一个id，那么对应的css就可以写上# id名字{}来声明我们这个标签对应的样式，如下

#v-id{
		width: 400rpx;
		height: 400rpx;
		background-color: red;
	}

类选择器

这个需要在html标签上，定义一个class属性，可以给多个标签使用，对应的css 需要定义为 .class名字{}。

.v-class{
		width: 400rpx;
		height: 400rpx;
		background-color: green;
	}

标签选择器

这个直接就是对应到具体的标签，在样式里写上 p{} text{}等等，表明对于的标签的样式

子选择器

这个是声明某个类选择器的下一个标签的样式，并且子选择器只会匹配某个元素的直接后代（元素与其子元素之间只有一层嵌套关系），子选择器由两个或多个选择器组成，选择器之间用大于号>分隔开 .v-class>v-child{}

<view  class="v-trans"  @click="jsFlash()">
			<view class="v-child">我的名字</view>>
		</view>
.v-trans  > .v-child{
		width: 200rpx;
		height: 200rpx;
		color: wheat;
		background-color: red;
	}

后台选择器

这个有点像子选择器，不过这里是用空格隔开就好了，通俗的理解就是后代不止有儿子，可能有孙子，孙子的儿子，孙子的孙子…只要是他的后代，而且下面的标签，他的样式就会遵从这个样式

.v-trans .v-child{
		width: 200rpx;
		height: 200rpx;
		color: wheat;
		background-color: red;
	}

通用选择器

使html中的所有的标签，设置样式 *{}

伪类选择器

用于给html中不存在的标签（标签的某种状态）设置样式，比如鼠标划过的状态。

例如 a:hover{color:yellow;} #鼠标划过a链接标签时，颜色会变成黄色

分组选择器

分组选择器可以将同样的样式规则应用到多个选择器中，每个选择器之间使用逗号,进行分隔，这么做可以避免定义重复的样式规则，最大程度地减少 CSS 样式表中的代码。例如声明 h1,a{} 这个意思同时为h1和span标签设置css

属性选择器

给某一个属性为指定值的标签进行设置css 如[title=1]{} 这是给title值为1的元素设置css

input[type="text"] {   color: blue;}

选择器会匹配所有具有type="text"属性的<input>标签。

总结

大致总结就是以上选择器，对css的运用需要熟练掌握这些基础，但大部分时候我们都相对习惯使用类选择器。

css之选择器学习

前言