Правильный способ изменить отдельные элементы списка

Question

У меня есть css, как это:

.done {list-style-image:url('images/tick.gif')}
.notdone {list-style-image:url('images/cross.gif')}

И HTML, как это:

<ul>
    <li class="done">Done</li>
    <li class="notdone">Not Done</li>
</ul>

Отлично работает на IE6 и FF. Каждый элемент li имеет свое изображение для маркера. Но все документы, которые я вижу в list-style-image, говорят, что его следует применять к тегу ul.

Есть ли правильный или основанный на стандартах способ делать то, что я пытаюсь сделать, или это так?

РЕДАКТИРОВАТЬ: http://www.w3.org/TR/CSS21/generate.html

Похоже, это не говорит о том, что я не могу использовать list-style-image для тега li, но примеры этого не показывают.

Answer 1

Я считаю, что документы, на которые вы ссылаетесь, - это когда вы хотите, чтобы маркеры следовали определенному формату, поэтому класс применяется к родительскому тегу

<ul> 

в этих случаях. Поскольку у вас есть два изображения, каждое из которых вы хотите иметь свою собственную маркировку, я не вижу ничего плохого в том, что вы делаете

Answer 2

Стандарт CSS 2.1 приводит примеры, где list-style применяется непосредственно к li.

Хотя авторы могут указывать информацию «стиля списка» непосредственно в элементах элемента списка (например, «li» в HTML), они должны делать это с осторожностью.

Далее:

ol.alpha li   { list-style: lower-alpha } /* Any "li" descendant of an "ol" */ 
ol.alpha > li { list-style: lower-alpha } /* Any "li" child of an "ol" */

Итак, я бы сделал вывод, что можно применять list-style-type или list-style-image для непосредственного перечисления элементов, если вы осторожны и понимаете каскад вашего правила CSS.

Answer 3

После вашего редактирования ...

Если вы посмотрите на таблицу стилей по умолчанию для CSS, вы увидите, что li определяется следующим образом:

li              { display: list-item }

В указанной вами ссылке list-style-image действителен для любого элемента с display: list-item. Следовательно, согласно стандарту, то, что вы делаете, действительно.

Answer 4

Я столкнулся с несоответствиями, когда дело касается расстояния между списком изображений от браузера к браузеру. В результате я обычно пропускаю весь вопрос и делаю что-то вроде этого:

li {list-style: none; padding-left: 15px;}    
li.done {background: url(images/tick.gif) no-repeat left top;}
li.notdone {background: url(images/cross.gif) no-repeat left top;}

Конечный результат - это пуля, использующая те же изображения, которые вы изначально планировали, но у вас гораздо больше контроля над фактическим размещением и интервалом. Возможно, нужна настройка, но это общая идея.

Answer 5

Теоретически все записи в списке имеют одинаковый стиль маркера. Эти списки исторически встречаются в виде контуров, где на любом уровне у вас есть 1,2,3 или A, B, C, и нет смысла смешивать разные порядковые типы друг с другом. Я не думаю, что есть что-то плохое в том, что вы делаете стилистически. Но я не знаю, правильный ли это CSS.

Answer 6

Я не вижу проблемы с тем, что вы делаете. О каких документах ты говоришь?