首页 文章

CSS中的通配符*用于类

提问于
浏览 次
573

我有这些div，我正在使用 .tocolor 样式，但我还需要唯一标识符1,2,3,4等，所以我将它添加为另一个类 tocolor-1 .

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

.tocolor{
  background: red;
}

有没有办法只有一个类 tocolor-* . 我试过在这个css中使用通配符 * ，但它没有用 .

.tocolor-*{
  background: red;
}
css css-selectors wildcard

4 回答

  • 23

    另一种解决方案：

    div[class|='tocolor'] 将匹配以"tocolor-"开头的"class"属性的值，包括"tocolor-1"，"tocolor-2"等 .

    请注意，这与`不匹配

    参考：https://www.w3.org/TR/css3-selectors/#attribute-representation

    [att | = val]表示具有att属性的元素，其值正好是“val”或以“val”开头，后跟“ - ”（U 002D）

    回复于
  • 93

    你需要什么称为属性选择器 . 使用html结构的示例如下：

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

    在 div 的位置，您可以添加任何元素或将其全部删除，并且在 class 的位置，您可以添加指定元素的任何属性 .

    [class^="tocolor-"] - 以"tocolor-"开头 .
    [class*=" tocolor-"] - 包含直接出现在空格字符后面的子字符串"tocolor-" .

    Demo: http://jsfiddle.net/K3693/1/

    有关CSS属性选择器的更多信息，您可以找到here和here . 来自MDN Docs MDN Docs

    回复于
  • 1055

    如果您不需要唯一标识符来进一步设置div的样式并使用HTML5，您可以尝试使用自定义数据属性 . 阅读here或尝试谷歌搜索 HTML5 Custom Data Attributes

    回复于
  • 3

    是的，你可以这样 .

    *[id^='term-']{
    [css here]
}

    这将选择以 'term-' 开头的所有ID .

    至于不这样做的原因，我看到选择这种方式最好的地方;至于风格，我不会自己做，但它是可能的 .

    回复于

相关问题