---
title: 选择器
date: 2024-06-06T23:50:59Z
tags: []
---



## 通配选择器

`*`
会选择所有的样式

## 元素选择器

`标签`
会选择对应的样式

## 类选择器

`.类名`
在标签里面加上该类就可以使用,用的时候不用带`.`
如果需要用多个类
class="类名1 类名2"

## ID选择器

`#ID`
对应的ID会使用该样式

## 复合选择器

### 交集选择器

选择同时符合多个条件的元素
`标签.类#ID`
有且只能有标签,可以有多个类

### 并集选择器

选择符合任意一个条件的元素
`选择器1， 选择器2, 选择器3`

### 后代选择器

选择某个选择中的某个选择器所有后代
`选择器1 选择器2 最后的选择器`

### 子代选择器

选择某个选择中的某个选择器所有子代
`选择器1>选择器2`

### 兄弟选择器

选择紧紧相连的元素
`选择器1+选择器2`
选择所有同级元素
`选择器1~选择器2`

## 属性选择器

选着具有该属性的元素
`[属性]`
选择该属性并且值为指定的
`[属性=属性值]`
选择该属性并且值以指定开头的
`[属性^=属性值]`
选择该属性并且值以指定结尾的
`[属性$=属性值]`
选择该属性并且值包含指定值的
`[属性*=属性值]`

## 伪类选择器

是元素特殊状态的一种描述

### 动态伪类

没有访问过的a元素
`a:link`
访问过的a元素
`a:visited`
选中悬浮状态的a元素
`a:hover`
激活状态下的a元素
`a:active`
`span`也可以选中和激活
选中时的元素
`表单类元素:focus`

### 结构类

选中选择器中符合选择条件的第一个元素,符合条件的
`选择器1 选择条件 类型:first-child`

选中选择器中符合选择条件的最后一个元素,符合条件的
`选择器1 选择条件 类型:last-child`

选中选择器中符合选择条件的第n个元素,符合条件的
`选择器1 选择条件 元素:nth-child(n)`

> n选择所有
> n可以是公式,an+b的形式
> even偶数

选中选择器中符合选择条件的第一个符合条件的类型
`选择器1 选择条件 类型:first-of-type`

选中选择器中符合选择条件的第n个符合条件的类型
`选择器1 选择条件 类型:nth-of-type(n)`

选中选择器中符合选择条件的倒数第n个符合条件的类型
`选择器1 选择条件 类型:nth-last-of-type(n)`

选中同类中只有该的元素
`元素:only-child`

选中同类中只有唯一的元素
`元素:only-of-type`

根元素
`root`

选中的是没有内容的元素
`元素:empty`

### 否定类

`选择器 选择条件 元素:not(条件)`

### UI类

选中的元素
`input:checked`
选中被禁用的元素
`input:disabled`
选中的是可用的元素
`inpuut:enabled`

### 目标类

选中锚点所指向的元素
`:target`

### 语言类

选中该选择器指定语言的元素
`:lang(语言)`

## 伪元素选择器

选择元素中的第一个文字
`元素::first-letter`
选择第一行
`元素::first-line`
被鼠标选中的文字
`::selection`
在元素内容前添加内容
`::before{content:"内容"}`
在元素内容后添加内容
`::after{content:"内容"}`
