当前位置: 首页 > news >正文

CSS 选择器详解:类型、用法与示例

在这里插入图片描述

文章目录

    • 引言
    • 1. 基本选择器
      • 1.1 元素选择器(Type Selector)
        • 语法
        • 示例
      • 1.2 类选择器(Class Selector)
        • 语法
        • 示例
      • 1.3 ID 选择器(ID Selector)
        • 语法
        • 示例
      • 1.4 通配符选择器(Universal Selector)
        • 语法
        • 示例
    • 2. 组合选择器
      • 2.1 后代选择器(Descendant Selector)
        • 语法
        • 示例
      • 2.2 子元素选择器(Child Selector)
        • 语法
        • 示例
      • 2.3 相邻兄弟选择器(Adjacent Sibling Selector)
        • 语法
        • 示例
      • 2.4 通用兄弟选择器(General Sibling Selector)
        • 语法
        • 示例
    • 3. 属性选择器
      • 3.1 属性存在选择器(Attribute Presence Selector)
        • 语法
        • 示例
      • 3.2 属性值选择器(Attribute Value Selector)
        • 语法
        • 示例
      • 3.3 属性值前缀选择器(Attribute Prefix Selector)
        • 语法
        • 示例
      • 3.4 属性值后缀选择器(Attribute Suffix Selector)
        • 语法
        • 示例
      • 3.5 属性值包含选择器(Attribute Substring Selector)
        • 语法
        • 示例
    • 4. 伪类选择器
      • 4.1 动态伪类(Dynamic Pseudo-classes)
        • 示例
      • 4.2 结构伪类(Structural Pseudo-classes)
        • 示例
      • 4.3 否定伪类(Negation Pseudo-class)
        • 语法
        • 示例
    • 5. 伪元素选择器
      • 5.1 `::before` 和 `::after`
        • 示例
      • 5.2 `::first-line` 和 `::first-letter`
        • 示例
    • 6. 总结
    • 参考资料

引言

CSS 选择器是用于选择 HTML 元素并为其应用样式的重要工具。掌握各种 CSS 选择器的用法,可以帮助开发者更高效地编写样式代码。本文将详细介绍 CSS 中的各种选择器,包括基本选择器、组合选择器、伪类选择器和伪元素选择器,并通过代码示例帮助读者深入理解。


1. 基本选择器

1.1 元素选择器(Type Selector)

元素选择器根据 HTML 元素的标签名选择元素。

语法
element {
  /* 样式规则 */
}
示例
p {
  color: blue;
}

1.2 类选择器(Class Selector)

类选择器根据元素的 class 属性选择元素。

语法
.className {
  /* 样式规则 */
}
示例
.highlight {
  background-color: yellow;
}

1.3 ID 选择器(ID Selector)

ID 选择器根据元素的 id 属性选择元素。

语法
#idName {
  /* 样式规则 */
}
示例
#header {
  font-size: 24px;
}

1.4 通配符选择器(Universal Selector)

通配符选择器选择所有元素。

语法
* {
  /* 样式规则 */
}
示例
* {
  margin: 0;
  padding: 0;
}

2. 组合选择器

2.1 后代选择器(Descendant Selector)

后代选择器选择某个元素的后代元素。

语法
ancestor descendant {
  /* 样式规则 */
}
示例
div p {
  color: red;
}

2.2 子元素选择器(Child Selector)

子元素选择器选择某个元素的直接子元素。

语法
parent > child {
  /* 样式规则 */
}
示例
ul > li {
  list-style-type: none;
}

2.3 相邻兄弟选择器(Adjacent Sibling Selector)

相邻兄弟选择器选择某个元素的下一个兄弟元素。

语法
element + sibling {
  /* 样式规则 */
}
示例
h1 + p {
  font-weight: bold;
}

2.4 通用兄弟选择器(General Sibling Selector)

通用兄弟选择器选择某个元素的所有兄弟元素。

语法
element ~ sibling {
  /* 样式规则 */
}
示例
h1 ~ p {
  color: green;
}

3. 属性选择器

3.1 属性存在选择器(Attribute Presence Selector)

选择具有指定属性的元素。

语法
[attribute] {
  /* 样式规则 */
}
示例
[target] {
  border: 1px solid black;
}

3.2 属性值选择器(Attribute Value Selector)

选择具有指定属性值的元素。

语法
[attribute="value"] {
  /* 样式规则 */
}
示例
[type="text"] {
  background-color: yellow;
}

3.3 属性值前缀选择器(Attribute Prefix Selector)

选择属性值以指定字符串开头的元素。

语法
[attribute^="value"] {
  /* 样式规则 */
}
示例
[href^="https"] {
  color: green;
}

3.4 属性值后缀选择器(Attribute Suffix Selector)

选择属性值以指定字符串结尾的元素。

语法
[attribute$="value"] {
  /* 样式规则 */
}
示例
[src$=".png"] {
  border: 2px solid blue;
}

3.5 属性值包含选择器(Attribute Substring Selector)

选择属性值包含指定字符串的元素。

语法
[attribute*="value"] {
  /* 样式规则 */
}
示例
[class*="btn"] {
  background-color: orange;
}

4. 伪类选择器

4.1 动态伪类(Dynamic Pseudo-classes)

根据用户交互状态选择元素。

示例
a:hover {
  color: red;
}

input:focus {
  border-color: blue;
}

4.2 结构伪类(Structural Pseudo-classes)

根据元素在文档中的位置选择元素。

示例
li:first-child {
  font-weight: bold;
}

li:nth-child(2n) {
  background-color: lightgray;
}

4.3 否定伪类(Negation Pseudo-class)

选择不匹配指定选择器的元素。

语法
:not(selector) {
  /* 样式规则 */
}
示例
:not(.highlight) {
  opacity: 0.5;
}

5. 伪元素选择器

5.1 ::before::after

在元素内容的前面或后面插入内容。

示例
p::before {
  content: "Note: ";
  font-weight: bold;
}

p::after {
  content: " (End)";
  color: gray;
}

5.2 ::first-line::first-letter

选择元素的第一行或第一个字母。

示例
p::first-line {
  font-size: 1.2em;
}

p::first-letter {
  font-size: 2em;
  color: red;
}

6. 总结

CSS 选择器是控制网页样式的重要工具。本文详细介绍了基本选择器、组合选择器、属性选择器、伪类选择器和伪元素选择器,并通过代码示例展示了它们的用法。掌握这些选择器,可以帮助开发者更高效地编写样式代码,实现复杂的布局和效果。


参考资料

  1. MDN Web Docs: CSS Selectors
  2. W3Schools: CSS Selectors
  3. CSS: The Definitive Guide

注意:本文中的代码示例仅供参考,实际应用中可能需要根据具体需求进行调整和优化。
在这里插入图片描述

相关文章:

  • 微博ip属地不发微博会不会变
  • Oracle 数据迁移至 GaussDB 注意事项
  • Gone v2 Tracer 组件-给微服务提供统一的traceID
  • 科技资讯杂志科技资讯编辑部科技资讯杂志社2025年第2期目录
  • 软考笔记——程序设计语言基础知识
  • Linux文件IO
  • 浅谈canal实例 在docker里面安装canal镜像 Canal监听MySQL数据库变更并同步更新Redis和Elasticsearch 示例
  • zabbix原生linux命令部署和docker部署
  • docker安装milvus向量数据库Attu可视化界面
  • 母婴电商企业案例:日事清驱动项目管理执行与OKR目标管理的流程自动化实践
  • 为什么labelme框选图片后闪退
  • 红宝书第七讲:this绑定与强制类型转换详解(小白指南)
  • 51单片机程序变量作用域问题
  • 【Oracle资源损坏类故障】:详细了解坏块
  • PyTorch分布式训练中各节点如何通信
  • Redis 持久化机制
  • 汇编代码中嵌入回调函数的优化说明
  • Centos7快速在线安装MySQL8.0最新版本教程
  • MySQL WHERE 子句详解
  • 蓝桥杯嵌入式赛道复习笔记5(捕获信号发生器的PWM的波形)
  • 杨荫凯已任浙江省委常委、组织部部长
  • 苏炳添任暨南大学体育学院院长
  • 儒说︱问世间孝为何物
  • 拖车10公里收1900元?货车司机质疑收费过高,潮州饶平县市监局已介入
  • 习近平向气候和公正转型领导人峰会发表致辞
  • 生态环境部:我国核电规模全球第一,总体安全可控