CSS的元素选择器

2025-05-23 86 阅读5分钟

前言

了解CSS(层叠样式表) 所有的选择器以及用法，在开发过程结合Emmet语法能够加快我们开发的效率，那么接下来，就让我们看看CSS有哪些选择器吧。

CSS所有选择器的作用

基础选择器

元素选择器(标签选择器)：选择所有指定的元素
- 描述：根据HTML元素的名称来选择元素
```
p{
    color:red;  /*p选择器会选择所有的p元素*/
}
```
类选择器(.开头)：选择所有具有指定类的元素
- 描述：通过类名找到对应的元素
```
.container{  /*通过HTML元素的class属性来选择元素*/
    background-color: red;
}
```
ID选择器(#开头)：选择具有指定ID的元素
- 描述：通过唯一ID找到对应的元素
```
#ball{
    height:100px;  /*选择ID为ball的元素*/
}
```

组合选择器

后代选择器(空格隔开) ：选择指定元素内部所有符合条件的后代元素
- 描述：通过空格隔开两个选择器，以选择第一个选择器的后代中符号条件第二个选择器元素
```
div p{
    color:red; /*选择div里的p元素*/
}
```
子元素选择器(>隔开)：选择指定元素的直接子元素
- 描述：使用>符号分隔选择器，通过>符号直接选择子元素
```
div>p{
    color:red;  /*选择所有直接位于div内的p元素*/
}
```
相邻兄弟选择器(+隔开)：选择与指定元素在同一层级且紧紧相邻的元素
- 描述：使用+符号隔开，选择紧接在另一元素后的元素，并且二者有着相同的父元素
```
h2+p{
    color:red;  /*h2+p会选择紧跟在h2元素之后的p元素*/
}
```
通用兄弟选择器(~隔开)：选择与指定元素在同一层级的所有后续兄弟元素
- 描述；使用~符号分隔选择器，选择某个元素之后的所有兄弟元素(共享相同父元素)，而不仅仅是紧接在后面的元素
```
h2~p{
    color:red;  /*h2~p会选择所有与h2元素在同一层级的p元素*/
}
```
群组选择器(,分割)：允许同时选择多个元素，并用相同的样式应用
- 描述：允许同时选择多个选择器，并对它们应用相同的样式规则
```
h1, h2, p {
    color:red;
}
```

属性选择器

等于属性选择器([attr='value'])：选择具有指定属性并且属性值相对的元素
- 描述：根据元素的属性及属性值来选择匹配的元素
```
a[target='value']{
    color:red;
}
```
包含属性选择器([attr~='value])：选择属性值包含指定完整字串的元素
- 描述：实际上[attr~='value']选择器拥有选择属性值中包含一个完整单词value的元素
```
a[title='value']{
    color:red;
}
```
起始属性选择器([attr^='value'])：选择属性以指定字串开头的元素
- 描述：选择属性值以指定字串开头的元素
```
a[href^='https']{
    color:red;
}
```
结尾属性选择器([attr$='value'])：选择属性以指定字串结尾的元素
- 描述：选择属性值以指定字串结尾的元素
```
a[href$='.pdf']{
    color:red;
}
```
字串属性选择器([attr*='value'])：选择属性值包含指定字串的元素
- 描述：选择属性值中包含指定字串的元素(与[attr~='value'])不同，这里不需要完整的单词匹配
```
a[href*='value']{
    color:red;
}
```

伪类选择器

动态伪类选择器：用于选择处于特定状态的元素
- :hover：当鼠标指针悬停在元素上时触发
- :active：当元素被用户激活时触发
- :focus：选择获得焦点的元素
- :visited：选择已访问过的链接
- :link：选择未访问过的链接
结构伪类选择器：基于元素在文档树中的位置或与其他元素的关系来选择元素。
- :first-child：选择父元素的第一个子元素
- :last-child：选择父元素的最后一个子元素
- :nth-child(n)：选择父元素的第n个子元素，n可以是数字，关键字(如'even')或者公式(如2n+1)
- :nth-child(n)：类似于:nth-child(n)，但是它是从最后一个子元素进行计数
- :only-child：选择父元素仅有一个子元素，且该子元素匹配选择的元素
- ......

伪元素选择器

伪元素选择器(::开头)：用于选择元素的某个部分或向元素添加虚拟内容，并允许为这些虚拟内容或特定部分设置样式
- 文本相关伪元素
  - ::first-letter：用于选择文本块的第一个字母，并允许为其设置特殊样式
  - ::first-line：用于选择文本块的第一行，并允许为其设置与后续文本不同的样式
- 内容生成伪元素
  - ::before：在元素的内容之前插入新的内容或装饰
  - ::after：在元素的内容之后插入新的内容或装饰

其他选择器

通配符选择器（'*'）: 选择页面上的所有元素。它在特定情况下（如重置样式）有着特殊的用途。
根伪类选择器（:root）:选择文档的根元素（通常是'html'元素），并经常用于设置全局变量（CSS自定义属性）。
语言伪类选择器（:lang）：用于选择具有特定语言属性的元素。它基于lang属性来选择元素，这在处理

结语

根据以上的元素选择器，我们在写CSS样式的时候，结合选择器利用Emmet规范可以极大的提高编写的效率