Когда я хочу сопоставить определенный класс my-class-b, который также имеет другой класс my-other-class-a на том же элементе, я могу сделать
.my-class-b.my-other-class-a {
}
Также, когда я хочу совместить частичное имя класса, я могу использовать
[class^="my-class-"] {
}
Теперь я хочу смешивать оба, но он, похоже, не работает. Как я могу сделать
[class^="my-class-"].my-other-class-a {
}
Это происходит потому, что атрибут класса проверяется для начала с указанным классом в селекторе css [class^="abc"].
Если селектор
[class^="my-"]
Тогда
class="my-class red"
не совпадает с
class="red my-class"
Проверьте это на http://jsfiddle.net/u5sfge94/
Один из способов - указать новый класс, который действует как [class ^ = "abc" ]. Это может сделать вашу таблицу стилей немного более организованной, ваш код более разборчивым, а css - чуть быстрее.
Пояснение @juank в предыдущем ответе верное: порядок, который вы пишете ваши классы, имеет значение, потому что ^ означает начало значения.
Но есть много других селекторов атрибутов, использующих обозначение regexp: ^=, *= и $= в частности; соответственно для начинается с, где угодно и заканчивается совпадением.
Если вы хотите, чтобы ваш селектор соответствовал классам, содержащим my-class, где бы он ни находился, вы должны использовать *= (см. Сниппет 1).
Но тогда он также будет соответствовать любому классу, не начинающемуся с my-class, но все еще содержащему его. Чтобы этого избежать, вы можете сопоставлять, как вы это делали ранее, с ^=, а также сопоставлять [class*=" my-class"] (с пробелом): он учитывает случай, когда он не является первым классом, записанным в значении класса атрибут (см. Снипп 2).
Ресурс: CSS3 Подстрока, соответствующая селекторам атрибутов на CSS3.info(ссылка на уровень CSS CSS 3. очень конец)
Фрагмент 1:
[class*='my-class'].my-other-class-a {
background-color: lightgreen;
}<div class="my-class-a my-other-class-a">Should match 1</div>
<div class="my-class-b my-other-class-a">Should match 2</div>
<div class="my-other-class-a">Nope</div>
<div class="my-other-class-a my-class-a">Should match 3</div>
<div class="my-other-class-a my-class-b">Should match 4</div>
<div class="whatever my-other-class-a my-class-a">Should match 5</div>
<div class="other my-other-class-a my-class-b">Should match 6</div>
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>Это не точно доказательство пули, но пока ваш "переменный" класс является первым, это может работать:
div[class^='my-class'][class~='my-other-class-a'] {
background-color: red;
}<div class="my-class-a my-other-class-a">Hello</div>
<div class="my-class-b my-other-class-a">World</div>
<div class="my-other-class-a">Bye</div>