探究 CSS 选择器:从基础到高级

CSS(层叠样式表)是用于定义网页上元素样式和布局的重要技术。在 CSS 中,选择器是一种用于选择要应用样式的 HTML 元素的模式。选择器是 CSS 的核心组成部分,掌握不同类型的选择器对于创建精美的网页设计至关重要。本文将从基础到高级介绍 CSS 选择器,以帮助您更好地理解如何选择和样式化 HTML 元素。

1. 基础选择器

1.1 元素选择器

元素选择器是最基本的选择器,通过指定 HTML 元素的标签名称来选择元素。

css 复制代码
p {
  color: blue;
}

上述示例中的样式将应用于所有 <p> 标签。

1.2 类选择器

类选择器通过给 HTML 元素添加 class 属性,然后通过 . 后跟类名来选择元素。

css 复制代码
.button {
  background-color: #ff6600;
}
html 复制代码
<button class="button">Click me</button>

类选择器允许您为多个元素应用相同的样式。

1.3 ID 选择器

ID 选择器通过给 HTML 元素添加 id 属性,然后通过 # 后跟 ID 来选择元素。

css 复制代码
#header {
  font-size: 24px;
}
html 复制代码
<div id="header">Page Header</div>

每个页面只能有一个相同的 ID,因此 ID 选择器用于唯一标识元素。

2. 层次选择器

层次选择器允许您选择特定层次结构中的元素。

2.1 后代选择器

后代选择器通过空格分隔的选择器,选择某个元素下的所有后代元素。

css 复制代码
.container p {
  margin: 10px;
}

上述示例中的样式将应用于所有在类名为 "container" 的元素内部的 <p> 标签。

2.2 子元素选择器

子元素选择器通过 > 分隔的选择器,选择某个元素的直接子元素。

css 复制代码
ul > li {
  list-style-type: square;
}

上述示例中的样式将仅应用于 <ul> 元素下的直接子元素 <li>

2.3 相邻兄弟选择器

相邻兄弟选择器通过 + 分隔的选择器,选择与指定元素在同一级的下一个兄弟元素。

css 复制代码
h2 + p {
  font-weight: bold;
}

上述示例中的样式将应用于紧跟在 <h2> 元素后的 <p> 元素。

3. 属性选择器

属性选择器允许您选择具有特定属性或属性值的元素。

3.1 属性存在选择器

属性存在选择器通过使用方括号 [],选择具有指定属性的元素。

css 复制代码
input[type="text"] {
  border: 1px solid #ccc;
}

上述示例中的样式将应用于所有 type 属性为 "text" 的 <input> 元素。

3.2 属性值选择器

属性值选择器通过使用方括号 []=,选择具有特定属性值的元素。

css 复制代码
a[href="https://www.example.com"] {
  color: green;
}

上述示例中的样式将应用于 href 属性值为 "www.example.com" 的 <a> 元素。

4. 伪类和伪元素选择器

伪类和伪元素选择器允许您选择元素的特殊状态或位置。

4.1 伪类选择器

伪类选择器以 : 开头,选择元素的特殊状态,例如 :hover 用于鼠标悬停状态。

css 复制代码
a:hover {
  text-decoration: underline;
}

4.2 伪元素选择器

伪元素选择器以 :: 开头,选择元素的特殊部分,例如 ::before 用于在元素前插入内容。

css 复制代码
p::before {
  content: "Chapter: ";
}

5. 复合选择器

复合选择器允许将多个选择器组合在一起以选择更复杂的元素。

css 复制代码
h1, h2, h3 {
  font-family: Arial, sans-serif;
}

上述示例中的样式将应用于 <h1>, <h2>, 和 <h3> 元素。

6. 通配符选择器

通配符选择器 * 用于选择页面上的所有元素。

css 复制代码
* {
  margin: 0;
  padding: 0;
}

这将重置所有元素的内边距和外边距。

选择器的优先级

在 CSS 中,选择器的优先级决定了哪些样式规则将应用于特定的元素,当多个规则应用于同一元素时,优先级越高的规则将胜出。CSS 选择器的优先级通常按以下规则计算:

  1. 内联样式 :直接应用于 HTML 元素的 style 属性的样式拥有最高的优先级。例如:

    html 复制代码
    <p style="color: red;">这是一段红色文本。</p>
  2. ID 选择器:通过 ID 选择器选择的元素拥有较高的优先级。例如:

    css 复制代码
    #header {
      background-color: blue;
    }
    html 复制代码
    <div id="header">页面标题</div>
  3. 类选择器、属性选择器和伪类:这些选择器通常具有中等优先级,它们用于选择多个元素。

    css 复制代码
    .button {
      background-color: green;
    }
    
    a[href="https://www.example.com"] {
      color: blue;
    }
    
    p:hover {
      text-decoration: underline;
    }
  4. 元素选择器和伪元素选择器:元素选择器选择特定的 HTML 元素,而伪元素选择器选择元素的特殊部分。

    css 复制代码
    h1 {
      font-family: "Arial", sans-serif;
    }
    
    p::before {
      content: "注意:";
    }
  5. 通配符选择器和继承的样式 :通配符选择器 * 和继承的样式通常拥有最低的优先级。通配符选择器选择所有元素,而继承的样式是从父元素继承的样式。

CSS 优先级的计算是基于每个规则中选择器的特点。如果多个规则应用于同一元素,浏览器将根据选择器的优先级来决定应用哪个规则的样式。如果两个规则具有相同的优先级,那么最后定义的规则将胜出,这被称为"层叠"。

结语

CSS 选择器是创建精美网页设计的关键工具。本文涵盖了从基础选择器到层次选择器、属性选择器、伪类和伪元素选择器的多个方面。熟练掌握这些选择器将使您能够更精确地选择和样式化网页元素,从而实现所需的外观和布局。

相关推荐
fg_4113 分钟前
无网络安装ionic和运行
前端·npm
理想不理想v4 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云14 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058716 分钟前
web端手机录音
前端
齐 飞22 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹39 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
sszmvb12341 小时前
测试开发 | 电商业务性能测试: Jmeter 参数化功能实现注册登录的数据驱动
jmeter·面试·职场和发展
测试杂货铺1 小时前
外包干了2年,快要废了。。
自动化测试·软件测试·python·功能测试·测试工具·面试·职场和发展
王佑辉1 小时前
【redis】redis缓存和数据库保证一致性的方案
redis·面试
真忒修斯之船1 小时前
大模型分布式训练并行技术(三)流水线并行
面试·llm·aigc