2017-02-02 4 views
2

Можно ли объявить css-путь, основанный на стиле элемента? Например, у меня есть два элемента ul на странице. Один из них имеет стиль list-style-type: lower-alpha;:Селектор CSS на основе стиля

<ul start="1" style="list-style-type: lower-alpha;"> 

и второй ул не list-style-type стиль:

<ul start="1"> 

Мне нужно применить CSS к уль элементу, который имеет list-style-type. Как написать такой селектор css?

Основная проблема заключается в том, что у меня есть числовые ul и lower-alpha ul элементы на той же странице, и я хочу сделать жирные цифры в альфа-и числовой ul. То есть, теперь я использую

.ts4page ul,ol li:before { 
    content: counter(item, lower-alpha) ". "; 
    counter-increment: item; 
    font-weight: bold; 
    margin-bottom: 3px; 
} 

Но это делает более низкую альфа ВСЕ мкл на странице, но не только, ул которые имеют style="list-style-type: lower-alpha;" стиль.

Спасибо!

+0

Определите класс в css для lower-alpha, а затем примените класс как css. –

+0

Определить класс - это нехорошее решение - я использую редактор wysiwyg CKEditor, который генерирует списки только с помощью стиля 'style =" list-style-type: lower-alpha; "' –

+0

Использование селекторов атрибутов со стилем атрибута не является хорошей идеей (хотя в конечном итоге это может стать для вас единственным вариантом). Есть проблемы с дополнительными/неожиданными пробелами, другими свойствами, присутствующими в атрибуте стиля и т. Д. И т. Д. – Harry

ответ

3

Вы можете использовать селектор атрибута [style="list-style-type: lower-alpha;"]

ul[style="list-style-type: lower-alpha;"] { 
 
    color: green; 
 
}
<ul start="1" style="list-style-type: lower-alpha;"> 
 
    <li>Li</li> 
 
    <li>Li</li> 
 
</ul> 
 
<ul start="1"> 
 
    <li>Li</li> 
 
    <li>Li</li> 
 
</ul>

Если у вас есть более внутренний стиль, вы можете использовать [attr*=value] найти list-style-type: lower-alpha; в качестве подстроки

ul[style*="list-style-type: lower-alpha;"] { 
 
    color: green; 
 
}
<ul start="1" style="opacity: .7; list-style-type: lower-alpha; font-size: 12px;"> 
 
    <li>Li</li> 
 
    <li>Li</li> 
 
</ul> 
 
<ul start="1"> 
 
    <li>Li</li> 
 
    <li>Li</li> 
 
</ul>

+0

Большое спасибо! –

Смежные вопросы