Как стилизовать элементы списка (с тем же классом) индивидуально

Question

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

<ul>
<li class="sameforall">menu 1</li>
<li class="sameforall">menu 2</li>
<li class="sameforall">menu 3</li>
<li class="sameforall">menu 4</li>
</ul>

Я знаю это, но оно работает только для первого предмета: (

ul:first-child li{
/*my css*/
} 

Answer 1

Почему вы даете всем li один и тот же класс?

Дайте ul класс для стилизации содержащихся li, а затем присвойте li свой собственный класс, например:

<ul class="sameforall">
   <li class="one">menu 1</li>
   <li class="two">menu 2</li>
   <li class="three">menu 3</li>
   <li class="four">menu 4</li>
</ul>

.sameforall {color: red;}
   .sameforall .one {background-color: blue;}
   .sameforall .two {background-color: green;}
   .sameforall .three {background-color: pink;}
   .sameforall .four {background-color: purple;}

Вы не можете получить доступ к HTML, CSS3 поддерживает: выбор nth-child () psuedo - http://css -tricks.com / how-nth-child-works /

<ul>
   <li class="sameforall">menu 1</li>
   <li class="sameforall">menu 2</li>
   <li class="sameforall">menu 3</li>
   <li class="sameforall">menu 4</li>
</ul>

.sameforall:nth-child(1) { background-color: blue; }
.sameforall:nth-child(2) { background-color: green; }
.sameforall:nth-child(3) { background-color: pink; }
.sameforall:nth-child(4) { background-color: purple; }

Обратите внимание, это не будет работать в большинстве старых браузеров.

Answer 2

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

 <ul class="sameforall">
   <li id='first' >menu 1</li>
   <li id='second'>menu 2</li>
   <li id='third' >menu 3</li>
   <li id='forth' >menu 4</li> 
 </ul>

Тогда вы бы ссылались на эти элементы в css-файле следующим образом:

#first{/*Your css*/}

Если вы хотите просмотреть список поддерживаемых браузеров для nth-child посещения этой страницы , она содержит таблицу с некоторыми из самых популярных версий браузеров и проблемами поддержки, которые могут у них возникнуть. 1011 *

Answer 3

вам нужно использовать метод nth-child.

Здесь все подробно. Надеюсь, это поможет вам.

http://www.w3.org/TR/css3-selectors/

Answer 4

Так как вы не можете изменить разметку, и выбор потомков с помощью CSS не очень хорошо поддерживается, единственный способ сделать это с помощью JavaScript.

<ul>
    <li class="sameforall">menu 1</li>
    <li class="sameforall">menu 2</li>
    <li class="sameforall">menu 3</li>
    <li class="sameforall">menu 4</li>
</ul>
<script type="text/javascript">
    var listItems   = document.getElementsByTagName("ul")[0].getElementsByTagName("li");
    var numChildren = listItems.length; 
    for(var i = 0; i < numChildren; i++) {
        var item = listItems[i]; 

        // -> do whatever you want with each item.
        switch(i) {
            case 0: item.style.backgroundImage = 'url(item-1.gif);'; break;
            case 1: item.style.backgroundImage = 'url(item-2.gif);'; break;
            case 2: item.style.backgroundImage = 'url(item-3.gif);'; break;
        }            
    }
</script>

Answer 5

вам нужно : nth-child () кстати должно быть

ul li:fist-child