Copyright © 2018-2022 All Rights Reserved.
了解最新技术文章
从头开始构建网站是完全控制其外观和感觉的最可靠方法。但要做到这一点，您需要了解 HTML、CSS 和 JavaScript。缩短开发时间的一种方法是使用 CSS 选择器来自定义您的网站。我们将详细介绍 CSS 选择器是什么，并讨论在 Web 开发中使用它们的复杂性。
层叠样式表 (CSS) 是一种使网页看起来美观的设计语言。菜单边框的所有横幅图像通常都是使用 CSS 完成的。CSS 代码的核心是它的选择器。
CSS 选择器允许开发人员定位 网页 HTML 元素并设置其样式。您可以使用它们为您的网站添加颜色、形状和样式。
CSS 选择器可让您确定要对哪些元素应用 CSS 样式规则，这些规则定义了它们的外观 - 执行 Web UI 测试时需要考虑的重要事项。
选择器使样式网站更易于管理。您可以通过两种不同的方式在 CSS 中使用选择器：
将 CSS 选择器添加到网页的 <head> 部分
将 CSS 样式和选择器存储在单独的文档中，并从网页的 <head> 部分链接到它
许多设计师发现从单独的文档引用 CSS 选择器更容易。这样可以更清晰地分离 HTML 代码和 CSS 语言。以下是您应包含在 HTML 布局的 <head> 部分中的链接示例：
“<link rel=”stylesheet” href=”style.css">”
在深入研究之前，我们先来谈谈 CSS 元素选择器，也称为通用选择器。将它们视为 HTML CSS 选择器。它们针对特定 HTML 元素的所有实例。
如果您想设置网页的所有段落元素的样式，您可以使用 p 选择器，如下所示：
p { 字体大小：18px; 颜色：#334；}上面的基本 CSS 选择器元素添加了 CSS 属性值，将所有段落的字体大小设置为 18 像素，并将文本颜色设置为漂亮的蓝洋红色 — 这只是如何使用 CSS 元素选择器的一个示例。如果您想对多个元素使用相同的 CSS，可以将多个 CSS 选择器合并到一个列表中。
例如，如果您想对 <h1> 和 <h2> 标头应用相同的 CSS 样式，则可以在单个列表中为多种类型的选择器设置 CSS 规则：
h1, h2 {颜色: 蓝色; }逗号前后的空格有效。有些人选择将选择器放在新行上以使规则更具可读性。
现在我们已经对在 CSS 中使用选择器有了基本的了解，让我们探索一些简单的 CSS 选择器示例。这六个常见的 CSS 选择器使您能够选择不同的网页元素组。
CSS 类型选择器可让您对页面上的 HTML 元素应用一致的样式。这样，您的标题、段落和列表项就可以具有统一的外观，从而使您的网页具有连贯的外观和感觉。
CSS 类选择器允许 Web 开发人员使用由句点 (.) 表示的类属性，然后是 CSS 样式表中的类名称来定位 HTML 元素。
通过将“class”属性添加到元素的标签并指定其名称，可以将 HTML 元素与类选择器关联起来：
.new-class { /* 添加 CSS 样式 */ }然后您可以将上面的类应用到您的 HTML 中：
<p class=" new-class">我们使用我们创建的类设置了该段落的样式。</p>
类选择器使您可以 对样式进行细粒度控制 ，这对于使某些元素看起来与同一网页中相同类型的元素不同非常重要。您可以使用类来设置不同的按钮样式：
.main-btn { 背景颜色：#0078d4; 白颜色; 内边距：15 像素 25 像素；}.second-btn { 背景颜色：#eee; 颜色：#333； 内边距：10px 20px；}ID 选择器是 CSS 机制，可让开发人员使用唯一标识符定位单个 HTML 元素。它们包含一个哈希符号 (#)，后跟 ID 名称。通过将“id”属性添加到标签并指定 ID 名称，可以将 HTML 元素与 CSS ID 选择器关联起来：
#single-element { /* CSS 样式放在这里 */ }然后您可以将上面的 ID 选择器应用到您的 HTML 中：
<div id="single-element">我们使用唯一的 ID 设计了这个单独的元素。</div>
开发人员使用 CSS 属性选择器根据属性的存在或特定值来定位 HTML 元素。它们为您提供了一种应用满足特定属性标准的样式的方法。您可以使用方括号 ([...]) 设置属性。它们由属性名称和用引号引起来的可选值或值模式组成：
a[target="_blank"] { /* CSS 样式放在这里 */ }您可以在 HTML 中使用 CSS 属性来单击链接并访问新站点：
<a href="https://example.com" target="_blank">访问示例</a>
使用上述类型的 CSS 属性选择器可确保样式仅适用于目标属性设置为“_blank”的链接。
伪类根据元素在文档对象模型 (DOM) 中的状态或位置来定位元素。您可以使用冒号 (:) 后跟 CSS 伪类名称来指定伪类。伪选择器 将 样式应用于特定状态或上下文中的元素，例如悬停在其上的链接、选中的复选框或作为父级的第一个子级的元素。
当谈到 CSS ID 与类时，最大的区别是 ID 面向单个元素，而类则涵盖多个元素。
a:hover { /* CSS 样式放在这里 */ }您可以在 HTML 中使用上述伪类，这样当有人将鼠标悬停在链接上时应用特定样式：
<a href="#">将鼠标悬停在此链接上！</a>
伪类通常用于以下情况：
设置表单元素的样式
创建导航菜单
在特定上下文中定位元素
CSS 组合选择器定义 HTML 元素之间的关系或连接，让开发人员根据元素在 DOM 中的位置来定位元素。您可以创建复杂的选择器来精确定位元素以进行样式设置。CSS 选择器组合器有四种主要类型。
空白字符代表后代组合器。它选择从特定元素派生的所有元素，无论它们在 HTML 结构中嵌套的深度如何。
.parent_element p { /* CSS 样式放在这里 */ }上面的示例选择从使用类“parent_element”的元素派生的所有 <p> 元素。
子组合器使用 (>) 符号表示。它选择特定组件的直接子元素。下面是如何使用 CSS 运算符的示例。
.parent_element > p { /* CSS 样式放在这里 */ }上面仅选择从具有“parent_element”类的元素的子元素下降的 <p> 元素。
相邻同级组合器由 (+) 符号表示，选择紧邻指定元素之前的元素。您可以使用 CSS + 选择器，如下所示。
H3 + p { /* CSS 样式放在这里 */ }上面的示例选择紧随 <h3> 元素之后的所有 <p> 元素。它不会将样式应用于前面没有 <h3> 的 <p> 元素。
通用同级组合器使用 ( ~ ) 符号来选择与特定元素同级并共享相同父级的元素。
H3 ~ p { /* CSS 样式放在这里 */ }上面选择与 <h3> 元素具有相同父级的所有 <p> 元素。
开发人员通常使用 CSS 组合器来：
精确地将细粒度样式应用于元素
设置复杂的布局和设计
定位网页上的交互元素
通过定位表单或表格中的特定元素来增强可访问性
CSS 元素使您可以完全控制网页的响应能力、交互性和视觉吸引力。掌握 CSS 选择器可以帮助你：
保持网页设计和布局的一致性
高效设计网页样式
创建响应式设计
使页面更易于访问
将内容与网页行为分开
特异性是 CSS 选择器的一个重要方面。当两个或多个规则针对同一元素时，它们可让您决定应用哪些样式规则。它可以帮助浏览器确定当样式规则发生冲突时优先考虑哪种样式规则。
具有较高特异性的选择器会覆盖那些具有较低特异性的选择器。这是根据所使用的选择器的组合来计算的。
例如，ID 选择器自动具有比类选择器更高的特异性，类选择器比元素选择器具有更高的特异性。以下是 CSS 特异性层次结构的基本概述：
内联样式
标识符（ID）
类、伪类和属性
元素和伪元素
下面的示例 HTML 页面说明了其工作原理：
<html> <head> <style type="text/css"> H2 { 背景颜色：白色； 颜色: 蓝色; } #second { 背景颜色：白色； 颜色：绿色； } .third { 背景颜色：灰色； 颜色: 蓝色; } ＃第四 { 颜色：黑色; } .fifth { 颜色：橙色； } </风格> </头><body> <h2 id="second" class="fourth"> ID = 最高优先级。 </h2> <h2> 元素选择器位于优先级列表的底部。 </h2> <h2 class="fifth"> 与元素选择器相比，类的优先级更高。 </h2> <h3 style="颜色：绿色；" id="fourth" class="fifth"> 内联 CSS 位于优先级列表的顶部。</h3> </body> </html>您还可以使用 CSS 分组选择器设置多个元素的样式，该选择器是通过在每个元素后添加逗号来创建的：
img, p, h2 { /* CSS 样式在这里 */ }Ranorex 提供了帮助简化 Web 开发流程的工具。我们还帮助您 自动化网络测试， 以帮助您确认网站的功能。查看 Ranorex Selocity 浏览器扩展，旨在加快选择器的元素创建速度。x
上一篇：节省时间的测试自动化场景和用例
下一篇：自动化安全测试：6 个最佳实践
售前咨询专员
