选择以类名开头并包含部分字符串的元素

Question

我将选择类名为“path_from”的元素等。

让我举个例子。

<div class='path_from_5_to_6'></div>
<div class='_6'></div>
<div class='path_from_6_to_5'></div>
<div class='path_from_3_to_2'></div>

我想选择类名以"path_from"开头且包含"_6"的元素。

我该如何做？

- Jin

---

class='(path_from[^']*6.*?)' - Tushar

请注意，除非您只是编写一个快速且简单的一次性脚本，否则应该避免使用正则表达式来解析HTML。如果您还没有被说服，请参阅这个精彩的答案。 - Aaron

Answer 1

您可以使用 [class^="path_from"][class*="_6"] 属性选择器。

• [class^="path_from"] - class 以 path_from 开头
• [class*="_6"] - class 包含 _6

[class^="path_from"][class*="_6"] {
  background: blue;
}

<div class='path_from_5_to_6'>DIV</div>
<div class='_6'>DIV</div>
<div class='path_from_6_to_5'>DIV</div>
<div class='path_from_3_to_2'>DIV</div>

- Nenad Vracar

---

我没有看到你的回答。我给你点赞并删除了我的回答，因为它和你的一样 \o/ - Francisco Romero

Answer 2

这里有一个例子

[class*="path"][class*="6"] {
  width: 100px;
  height: 100px;
  background: yellow;
}

<div class="path_To_6"></div>

- Hitmands

Answer 3

你不需要这样做。这就是你使用 class 和 id 的原因。使用 class 来表示相关元素，使用 id 来表示单个元素。

<div class="path_6" id="path_from_5_to_6"></div>
<div id="_6"></div>
<div class="path_6" id="path_from_6_to_5"></div>
<div id="path_from_3_to_2"></div>

然后你只需选择使用.path_6：

.path_6 {
  // styles
}

- Midas

---

是的，您可以使用类型选择器来实现。请查看@NenadVracar的答案。 - Francisco Romero