CSS（层叠样式表）选择器

猪鼻插大葱扮大笨象

已于 2024-07-21 23:27:55 修改

阅读量1.8k

点赞数 39

分类专栏：前端自学知识文章标签： css 前端

于 2024-07-21 23:25:52 首次发布

版权

6 篇文章

订阅专栏

CSS（层叠样式表）选择器是用于选择和应用样式到 HTML 元素的模式。选择器的类型多种多样，下面是对 CSS 选择器的详细介绍，包括基本选择器、组合选择器、伪类和伪元素选择器等。

通用选择器（*）
- 选择所有元素。
- 例子：* { margin: 0; padding: 0; }
元素选择器
- 选择特定类型的元素。
- 例子：p { color: blue; } 选择所有 <p> 元素。
类选择器（.）
- 选择带有特定类名的元素。
- 例子：.highlight { background-color: yellow; } 选择所有类名为 highlight 的元素。
ID 选择器（#）
- 选择具有特定 ID 的元素。ID 在文档中是唯一的。
- 例子：#header { font-size: 24px; } 选择 ID 为 header 的元素。

后代选择器（空格）
- 选择某个元素的所有后代元素。
- 例子：div p { color: red; } 选择所有在 <div> 内的 <p> 元素。
子选择器（>）
- 选择某个元素的直接子元素。
- 例子：ul > li { list-style-type: none; } 选择所有直接子元素为 <li> 的 <ul>。
相邻兄弟选择器（+）
- 选择紧接在某个元素后面的第一个兄弟元素。
- 例子：h1 + p { margin-top: 0; } 选择紧跟在 <h1> 后面的第一个 <p> 元素。
一般兄弟选择器（~）
- 选择某个元素后面的所有兄弟元素。
- 例子：h1 ~ p { color: green; } 选择所有在 <h1> 后面的 <p> 元素。

基本属性选择器
- 选择具有特定属性的元素。
- 例子：input[type="text"] { border: 1px solid #ccc; } 选择所有类型为 text 的 <input> 元素。
包含属性值选择器（[attr*="value"]）
- 选择属性值包含特定字符串的元素。
- 例子：a[href*="example"] { color: orange; } 选择所有 href 属性中包含 example 的链接。
开头属性值选择器（[attr^="value"]）
- 选择属性值以特定字符串开头的元素。
- 例子：a[href^="https"] { color: green; } 选择所有以 https 开头的链接。
结尾属性值选择器（[attr$="value"]）
- 选择属性值以特定字符串结尾的元素。
- 例子：img[src$=".png"] { border: 1px solid black; } 选择所有以 .png 结尾的图片。

动态伪类
- 选择用户与元素交互后的状态。
- 例子：
  - a:hover { text-decoration: underline; } 选择鼠标悬停时的链接。
  - input:focus { border-color: blue; } 选择获得焦点的输入框。
结构性伪类
- 选择特定结构位置的元素。
- 例子：
  - li:first-child { font-weight: bold; } 选择每个列表的第一个子元素。
  - p:nth-child(2) { color: red; } 选择每个父元素的第二个子 <p> 元素。

伪元素
- 用于选择元素的一部分。
- 例子：
  - p::first-line { font-weight: bold; } 选择每个 <p> 元素的第一行。
  - p::before { content: "Note: "; font-style: italic; } 在每个 <p> 元素前添加内容。