Существует ли селектор CSS префиксом класса?
Я хочу применить правило CSS к любому элементу, чей один из классов соответствует указанному префиксу.
Например, Я хочу правило, которое будет относиться к отделению, которое имеет класс, который запускается с status- (A и C, но не B в следующем отрывке):
<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>
Своего рода комбинация:
div[class|=status] и div[class~=status-]
Действительно ли это выполнимо в соответствии с CSS 2.1? Действительно ли это выполнимо под какой-либо спецификацией CSS?
Примечание: Я действительно знаю, что могу использовать jQuery для эмуляции этого.
2 ответа
Это невозможно с селекторами CSS. Но вы можете использовать два класса вместо одного, например статус и важный вместо статус-важный .
Вы не можете этого сделать, нет. Есть один селектор атрибутов , который полностью или частично соответствует до знака -, но он не будет работать здесь, потому что у вас есть несколько атрибутов. Если имя класса, которое вы ищете, всегда будет первым, вы можете сделать это:
<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>
</body>
</html>
Обратите внимание, что это просто указать, какой селектор атрибутов CSS является ближайшим, не рекомендуется предполагать, что имена классов всегда будут впереди поскольку javascript может управлять атрибутом.