Наличие проблемы css с неупорядоченными списками

Question

HTML-разметка

<ul>
 <li> <a href="...">parent</a>
   <ul><li> <a href="...">child</a> </li></ul>
 </li>
</ul>

Что я хочу сделать, так это применить фон только к родительскому ли.

ul li a{
    background:url(images/nav/divider.jpg) right bottom no-repeat;
}

Этот стиль применяется ко всем li-s, а не только к родительским.

Как я могу применить правило css только к родительским li-s?

Answer 1

Гадание по вашему необычному HTML:

ul li.parent a {
    background:url(images/nav/divider.jpg) right bottom no-repeat;
    display:block;
    width:50px;
    height:15px;
}

Добавьте свое значение соответственно.

Answer 2

У вас есть два основных варианта:

1. Используйте CSS, чтобы установить стиль для элементов li, а затем переопределите эти стили для дочерних li элементов или
2. Укажите id для родительского элемента или a родительский элемент, а затем более конкретно выберите

<ч />

1

ul li {
    background-image: url(path.to/image.png);
}

ul li li {
    background-image: none;
}

JS Fiddle demo .

2

<ul id="uniqueID">
    <li>first-level</li>
    <li>
         <ul>
             <li>Second-level</li>
         </ul>
    </li>
</ul>

и с CSS:

#uniqueID > li {
    background-image: url(path.to/background-image.png);
}

JS Fiddle demo

Однако стоит отметить, что многие элементы по умолчанию или с CSS-перезагрузками имеют прозрачный фон. Это означает, что вам может потребоваться переопределить стили родительских элементов li независимо от того,

#uniqueID > li {
    background-image: url(path.to/background-image.png);
}
li li {
     background-image: none;
}

JS Fiddle demo

Answer 3

Вам просто нужен первый дочерний селектор:

#foo > li{
    ...
}

Это состояние "выбрать элемент LI только после #id".

EDIT Я долженотметьте, что вам нужно нацелить на родительский элемент UL идентификатор или класс.

РЕДАКТИРОВАТЬ 2 Я вижу ваш обновленный пример HTML.Удален мой вложенный HTML.