如何使用 CSS 选择器为具有相似类名的多个 Div 设置样式？

在 CSS 类中使用通配符

在您的查询中，您的目标是使用公共类“tocolor”来设置多个 div 的样式，同时包含唯一标识符（例如，tocolor-1 ，着色-2)。您尝试在 CSS 中使用通配符“*”来简化此操作，但事实证明不成功。

为了达到您想要的结果，我们在 CSS 中引入了属性选择器。属性选择器允许您根据特定属性（例如类值）来定位元素。

对于您的场景，您可以使用以下 CSS 选择器：

div[class^="tocolor-"], div[class*=" tocolor-"] {
  color: red;
}

其工作原理如下：

• [class^="tocolor-"]：此选择器匹配 class 属性以以下开头的元素"tocolor-".
• [class*=" tocolor-"]：此选择器匹配类属性在字符串中任意位置包含“tocolor-”的元素，前面有一个空格字符。

通过组合这两个选择器，您可以使用满足这些条件之一的类来定位任何元素。

例如，给定以下 HTML结构：

<div class="tocolor tocolor-1">tocolor 1</div>
<div class="tocolor tocolor-2">tocolor 2</div>
<div class="tocolor tocolor-3">tocolor 3</div>

应用上面的 CSS 选择器会将所有这些 div 的颜色设置为红色。

在 JSFiddle 上查看此交互式演示：http://jsfiddle.net/K3693 /1/

有关 CSS 属性选择器的更全面的信息，请参阅以下内容资源：

• CSS 属性选择器（W3Schools）：https://www.w3schools.com/cssref/css_selectors.asp
• 属性选择器（MDN Web 文档）：https://www.w3schools.com/cssref/css_selectors.asp

属性选择器（MDN Web 文档）：https://www.w3schools.com/cssref/css_selectors.asp /developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

以上是如何使用 CSS 选择器为具有相似类名的多个 Div 设置样式？的详细内容。更多信息请关注PHP中文网其他相关文章！