CSS选择器

原创已于 2025-03-24 19:07:29 修改 · 1.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-03-23 18:17:46 首次发布

前端同时被 2 个专栏收录

342 篇文章

订阅专栏

CSS+HTML5

27 篇文章

订阅专栏

CSS选择器

1.有哪些选择器
2.一些问题
3.选择器中哪些属性可以继承?哪些不能继承?
- 3.1 可以继承的属性
- 3.2 不可以继承的属性

1.有哪些选择器

1.1 基本选择器

1.1.1 通配符选择器

格式：* {}
解释：选择所有元素。
案例：
```
*{
   margin: 5px;
   padding: 5px;
}
```
效果：选择所有元素，设置内外边距为5px。

1.1.2 标签选择器(元素选择器)

格式：element {}
解释：选择所有指定的HTML元素。
案例：

  p{ 
     color: blue; 
  }

效果：选择所有<p>元素，设置文本颜色为蓝色。

1.1.3 id选择器

格式：#id {}
解释：选择具有指定ID的元素，注意ID是唯一的。
案例：
```
#special {
   font-weight: bold;
}
```
效果：选择具有ID为special的元素，设置字体加粗。

1.1.4 类选择器

格式：.class {}
解释：选择所有具有指定类名的元素。

案例：

.highlight { 
    background-color: yellow; 
 }

效果：选择所有具有类名highlight的元素，设置背景颜色为黄色。

1.2 关系型选择器

1.2.1 后代选择器

格式：ancestor descendant {}
解释：选择某个元素的所有后代元素。

案例：

.container p{
   font-style: italic; 
}

效果：选择所有在.container类内的<p>元素，设置字体为斜体。

1.2.2 子代选择器

格式：parent > child {}
解释：选择某个元素的直接子元素。

案例：

 .container>p{ 
    text-decoration: underline; 
 }

效果：选择所有直接在.container类内的<p>元素，设置带有下划线。

1.2.3 相邻兄弟选择器

格式：element1 + element2 {}
解释：选择紧接在某个元素之后的兄弟元素。
案例：
```
 h2 + p { 
   color: green;
 }
```
效果：选择紧跟在<h2>元素后的<p>元素，设置文本颜色为绿色。

1.2.4 通用兄弟选择器

格式：element1 ~ element2 {}
解释：选择某个元素之后的所有兄弟元素。
案例：
```
h2 ~ p {
   color: purple;
}
```
效果：选择所有在<h2>元素之后的<p>元素，设置文本颜色为紫色。

1.3 复合型选择器

1.3.1 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。
语法：选择器1, 选择器2, 选择器3, ... 选择器n {}

案例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
   font-size: 40px;
   background-color: skyblue;
   width: 200px;
}

1.3.2 交集选择器

作用：选中同时符合多个条件的元素。
语法：选择器1选择器2选择器3...选择器n {}

举例：

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
  color: blue;
}
/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
  color: green;
}

1.4 属性选择器

1.4.1 属性存在

格式：[attribute] {}
解释：选择具有指定属性的元素。

案例：

input[placeholder] { 
   border: 2px dashed orange;
}

效果：选择所有具有placeholder属性的<input>元素，设置边框为2px橙色虚线。

1.4.2 属性值精确匹配

格式：[attribute=value] {}
解释：选择具有指定属性值的元素。

案例：

input[type="submit"] { 
    background-color: lightgreen; 
}

效果：选择所有type属性为submit的<input>元素，设置背景颜色为浅绿色。
效果：选择所有class属性包含important的<input>元素，设置边框为2px红色实线。

1.4.3 属性值以特定字符串开头

格式：[attribute^=value] {}
解释：选择具有以特定字符串开头的属性值的元素。
案例：
```
a[href^="https"] { 
  color: blue; 
}
```
效果：选择所有href属性以https开头的<a>元素，设置文本颜色为蓝色。

1.4.4 属性值包含特定子字符串

格式：[attribute*=value] {}
解释：选择具有包含特定子字符串的属性值的元素。

案例：

a[href*="example"] {
    text-decoration: underline;
}

效果：选择所有href属性包含example的<a>元素，设置带有下划线。

1.4.5 属性值以特定字符串结尾

格式：[attribute$=value] {}
解释：选择具有以特定字符串结尾的属性值的元素。

案例：

a[href$=".com"] {
   font-weight: bold;
}

效果：选择所有href属性以.com结尾的<a>元素，设置字体加粗。

1.5 伪类选择器

1.5.1 动态伪类

:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。
注意点：遵循 LVHA 的顺序，即： link、visited 、hover 、active。
:focus 获取焦点的元素。
表单类元素才能使用 :focus伪类。当用户：点击元素、触摸元素、或通过键盘的 “tab”键等方式，选择元素时，就是获得焦点。

1.5.2 结构伪类

常用的：

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于 n 的值：

0或不写：什么都选不中 —— 几乎不用。
n：选中所有子元素 —— 几乎不用。
1~正无穷的整数：选中对应序号的子元素。
2n或even：选中序号为偶数的子元素。
2n+1或odd：选中序号为奇数的子元素。
n+3：选中的是前 3 个。

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

1.5.3 否定伪类：

:not(选择器) 排除满足括号中条件的元素。

1.5.4 UI伪类：

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有disabled属性）。
:disabled 不可用的表单元素（有disabled属性）。

1.5.5 目标伪类

:target 选中锚点指向的元素。

1.5.6 语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang属性的值）。

1.6 伪元素选择器

::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

2.一些问题

2.1 first-child和first-of-type的区别

:first-child：适用于需要选择父元素的第一个子元素的场景，但需要注意它必须是父元素的第一个子元素。
:first-of-type：适用于需要选择父元素中同类型子元素中的第一个的场景，可以跨越不同类型的子元素。

:first-child选择器:
:first-child是一个伪类选择器，用于选择作为其父元素的第一个子元素的元素。换句话说，如果一个元素是其父元素的第一个子元素，那么它将被:first-child选择器选中。

<div class="parent">
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>


.parent p:first-child {
  color: red;
}

在这个示例中，.parent元素的第一个子元素是<p>元素，因此第一个段落的文本颜色将被设置为红色。

:first-of-type选择器:
:first-of-type也是一个伪类选择器，用于选择作为其父元素的第一个指定类型的子元素的元素。换句话说，如果一个元素是其父元素中同类型子元素中的第一个，那么它将被:first-of-type选择器选中。

<div class="parent">
  <div>第一个div</div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>


.parent p:first-of-type {
  color: blue;
}

在这个示例中，.parent元素的第一个<p>元素是第一个段落，因此第一个段落的文本颜色将被设置为蓝色。

再看一个例子:

<div class="parent">
  <div>第一个div</div>
  <p>第一个段落</p>
  <p>第二个段落</p>
</div>

.parent p:first-child {
  color: red;
}

.parent p:first-of-type {
  color: blue;
}

结果如下:

在这里插入图片描述

在这个示例中：

:first-child选择器不会选中任何<p>元素，因为第一个子元素是<div>元素，而不是<p>元素。
:first-of-type选择器会选中第一个<p>元素，因为它是父元素中同类型子元素中的第一个。

2.2 伪类和伪元素的区别

伪类:是为已有元素的某种状态添加样式
伪元素:用于创建一些不在文档流的元素，并且给它添加样式

2.3 伪元素的应用

首字母下沉
用伪元素清除浮动
鼠标拖拽选择
伪元素字体图标

2.4 CSS选择器权重

!important>内联样式>id>类/伪类>标签/伪元素/属性>通配符

3.选择器中哪些属性可以继承?哪些不能继承?

3.1 可以继承的属性

字体属性
- font:组合字体
- font-family:规定元素的字体系列
- font-weight:设置字体的粗细
- font-size:设置字体的尺⼨
- font-style:定义字体的⻛格
- font-variant:偏⼤或偏⼩的字体
文本系列属性(大多数)
- text-indent：⽂本缩进
- text-align：⽂本⽔平对刘
- line-height：⾏⾼
- word-spacing：增加或减少单词间的空⽩
- letter-spacing：增加或减少字符间的空⽩
- text-transform：控制⽂本⼤⼩写
- direction：规定⽂本的书写⽅向
- color：⽂本颜⾊ - 文本系列属性(大多数)
元素可见性
- visibility
其他属性
- caption-side：定位表格标题位置
- border-collapse：合并表格边框
- border-spacing：设置相邻单元格的边框间的距离
- empty-cells：单元格的边框的出现与消失
- table-layout：表格的宽度由什么决定
- list-style-type：⽂字前⾯的⼩点点样式
- list-style-position：⼩点点位置
- list-style：以上的属性可通过这属性集合
- quotes：设置嵌套引⽤的引号类型
- cursor：箭头可以变成需要的形状