CSS的选择器

程序中使用的选择多为类选择器、ID选择器和类型选择器，其它的选择器使用率比较低。这里将css的选择器做个总结

# * 通配选择器

通常用于清除浏览器默认样式

* {
	margin: 0;
	padding: 0;
}
<!-- 也可以搭配命名空间使用 -->
*.container {}
*[href="https://..."] {}
*#app {}

1
2
3
4
5
6
7
8

# # id选择器

id选择器会根据元素的id属性进行匹配，一般来说元素id是唯一的，程序中也尽量保持唯一性。

<template>
	<div id="app"></div>
</template>
<style>
#app {
	margin: 0;
	padding: 0;
	height: 100vh;
}
</style>

1
2
3
4
5
6
7
8
9
10

# . 类选择器

<template>
	<div class="test"></div>
</template>
<style>
.test {
	margin: 0;
	padding: 0;
	height: 100vh;
}
</style>

1
2
3
4
5
6
7
8
9
10

# 标签选择器

<template>
	<div class="test"></div>
</template>
<style>
<!-- 选中所有div标签 -->
div {
	margin: 0;
	padding: 0;
	height: 100vh;
}
</style>

1
2
3
4
5
6
7
8
9
10
11

# [] 属性选择器

选择器后紧跟[]符号来比配元素上的属性，如：[class="test"]选中class属性等于test的div标签，不等于或者部分等于的元素test other和testother不会被选中，如果要选中test other可以使用[class~="test"]，匹配testother可以使用[testother] 更多属性选择器用法详见mdn文档

<template>
	<div class="test"></div>
  <div class="test other"></div>
  <div class="testother"></div>
</template>
<style>
<!--  -->
div[class="test"] {
	margin: 0;
	padding: 0;
	height: 100vh;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 后代选择器

后代选择器的官方解释是：（通常用单个空格（" "）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。简单来说就是选择器后空格在跟上的选择器为后代选择器

div .red {}

1
2

这里的后代不区分子元素的层级的，如果说.red元素中再次包含属性为.red的元素，那这个样式也会生效.如果只想在第一代子元素生效我们可以使用子选择器，使用>符号只选中第一层子元素

div > .red {}

# : 伪类选择器

伪类选择器是为设置元素特殊状态下的样式，例如：:hover可以设置鼠标悬停时的元素样式常见的伪类选择器有：

:active 元素已激活，通常用于a标签
:checked 选中状态，用于单选radio、多选checkbox等元素
:first-child 一组兄弟元素中的第一个同名元素
:focus 元素获取焦点，用于input、select等元素
:hover 元素鼠标悬停
:nth-child() 根据在父元素中的索引选中元素更多伪类详见mdn伪类

# :: 伪元素选择器

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式，我们常使用的::after和before就是伪元素

上次更新: 2025/09/05, 8:09:00

← CSS图片手风琴伸缩效果 CSS波浪border→