如何像高手一样编写 CSS 选择器
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我在Endtest担任解决方案架构师。
在本文中，我将向您展示如何像高手一样编写 CSS 选择器。
什么是CSS选择器？
CSS 选择器是用于选择要与之交互的元素的模式。
它们可以在您的 CSS 文件、JavaScript 代码或自动化测试中使用。
餐厅类比
使用 CSS 选择器来定位元素就像告诉别人如何去你最喜欢的餐厅一样。
如果你最喜欢的餐厅名字很特别，那就很容易了。
但如果不行，你就需要提供更多细节。
您可以提供前往餐厅的路线，或者提供有关餐厅的其他详细信息。
提供路线指引通常都能奏效，除非那家餐厅是流动餐车。
简易方法
您可以直接从 Chrome 开发者工具中获取元素的 CSS 选择器：
但这个 CSS 选择器可能无法满足您的特定需求。
所以有时候你需要自己编写 CSS 选择器。
1. 使用 ID 编写 CSS 选择器。
这是 CSS 选择器的最基本示例。
假设你有一个 ID 为boss 的div 元素：
<div id="boss">I'm the boss.</div>
您的 CSS 选择器将如下所示：
#boss
只有当该元素的 ID 不是动态的时，才能使用此选项。
2. 使用类名编写 CSS 选择器。
如果你的元素类名为boss会怎样？
<div class="boss">I'm the boss.</div>
您的 CSS 选择器将如下所示：
.boss
值得注意的是，类名通常会被多个元素共享。
常见的错误是看到多个类名，却误以为它们只是一个用空格隔开的类名。
类名不能包含空格。
如果类属性的值中包含空格，则表示您有多个类名。
<div class="boss champion expert">I'm the boss.</div>
你的 CSS 选择器可以像这样：
.boss
或者像这样：
.champion
或者像这样：
.expert
3. 使用 Name 属性编写 CSS 选择器。
像 React 和 Ember.js 这样的现代框架往往会将 ID 动态化，这使得它们在 CSS 选择器中使用时变得不可靠。
在这种情况下，我们可以使用 Name 属性。
<div name="boss">I'm the boss.</div>
您的 CSS 选择器将如下所示：
div[name="boss"]
4. 使用任意属性编写 CSS 选择器。
你可以使用前面示例中的模式，通过任何属性（而不仅仅是名称）来编写 CSS 选择器。
tag_name[attribute="attribute_value"]
你甚至可以省略标签名称：
[attribute="attribute_value"]
或者直接用星号代替标签名称：
*[attribute="attribute_value"]
假设我们有一个带有动态 ID 的文件输入：
<input type="file" id ="upload3388">
由于我们不能使用 ID，所以我们可以编写一个使用 type 属性的 CSS 选择器：
input[type="file"]
5. 使用多个属性编写 CSS 选择器。
<input type="text" placeholder="Full Name">
<input type="text" placeholder="Email">
<input type="text" placeholder="Telephone">
我们只需要把这些属性对齐即可：
tag_name[attribute1="attribute1_value"][attribute2="attribute_2_value"]
因此，第一个输入框的 CSS 选择器将是：
input[type="text"][placeholder="Full Name"]
6. 使用属性的一部分编写 CSS 选择器。
你可能会遇到所有属性都是动态的情况。
<div id="boss5693">I'm the boss.</div>
<div id="champ4435">I'm the champ.</div>
<div id="expert9811">I'm the expert.</div>
我们的 CSS 选择器可以使用以下模式：
tag_name[attribute*="part_of_attribute_value"]
因此，第一个 div 元素的 CSS 选择器将如下所示：
div[id*="boss"]
7. 使用元素的父元素编写 CSS 选择器。
我们来看一个例子：
<html>
<body>
<div class="login-form">
<input id="mat-input-6" type="text" placeholder="Email">
<input id="mat-input-9" type="password" placeholder="Password">
</div>
</body>
</html>
我们很容易发现这些 ID 是动态的，所以我们必须避免使用它们。
我们可以通过选择电子邮件输入框的父元素来为其编写 CSS 选择器：
body > div > input[type=text]:nth-child(1)
显然，使用属性来编写会更容易：
input[placeholder="Email"]
8. 使用元素内的文本编写 CSS 选择器。
<html>
<body>
<ul class="items">
<li class="item">Apple</li>
<li class="item">Orange</li>
<li class="item">Banana</li>
</ul>
</body>
</html>
我们来尝试为橙色列表项编写一个 CSS 选择器。
唉，我们做不到。
CSS 选择器无法根据文本定位元素，但 XPath 可以。
橙色列表项的 XPath 为：
//li[contains(text(),'Orange')]
明智之选
如果您想执行自动化测试，不妨试试我们屡获殊荣的云平台Endtest 。
我们甚至还有一个测试录制器，可以配置为处理动态 ID 和属性：
您可以在我们的文档中找到所有详细信息。
文章来源：https://dev.to/liviufromendtest/how-to-write-css-selectors-like-a-boss-4k47