css - 如何选择CSS中某个单词前面的任何项目

Question

我需要做的很简单（理论上）。我有一些像这样的选择器：

.foo-one{
    color: #fff;
    border: 1px solid red;
}

.foo-two{
    color: #fff;
    border: 1px solid blue;
}

我需要做的是选择以“.foo-”开头的任何项目以将全局样式应用于所有项目，因为我不想做类似的事情：

.foo-one{
    transition: border 1s linear;
}

.foo-two{
    transition: border 1s linear;
}

有没有办法做到这一点？

score 2 · Accepted Answer

Bootstrap 使用了这样的选择器[class^="foo-"]

^="string"意味着从string

score 1 · Accepted Answer

尝试

[class|=foo]

演示

score 0 · Accepted Answer

0

尝试这个：

[class*="foo-"]{ 
    .. styles for all classes starting with foo- ...
}

于 2013-10-29T09:18:54.650 回答

score 0 · Accepted Answer

如果会有很多不同的类以开头foo，我建议为此创建一个额外的类，foo例如，你可以这样做：

.foo{
    transition: border 1s linear;
}

但是，如果这不是一个选项，而不是 2 种样式，您可以在规则中使用 2 个选择器来使用 1 个：

.foo-one,
.foo-two{
    transition: border 1s linear;
}

我不建议尝试创建一个选择器来适应以 . 开头的不同类名foo。它破坏了类名的意义。

score 0 · Accepted Answer

通过搜索，我发现了这个，这不是你想要的，但可以做到：

.foo-one,.foo-two {
    transition: border 1s linear;
}

5 回答 5