如何选择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;
}

有办法做到这一点吗？

Answer 1

Bootstrap使用了像[class^="foo-"]

这样的选择器

^="string"表示从string

开始

CSS3 Attribute Selectors

Answer 2

试

[class|=foo]

演示

http://jsfiddle.net/Z7X4X/

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 3

试试这个：

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

Answer 4

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

.foo{
    transition: border 1s linear;
}

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

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

我不建议尝试创建一个选择器以适应以foo开头的不同类名。它击败了班级名称。

Answer 5

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

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

来源：＆＃34; http://www.w3schools.com/cssref/css_selectors.asp＆＃34;