Формат li, который содержит ссылки, отличные от li, который не содержит ссылок

Question

У меня есть такой список:

<ul>
 <li><a...>...</a></li>
 <li>...</li>
</ul>

где оба типа элементов находятся несколько раз в произвольном порядке. Есть ли способ отформатировать эти li по-другому? (разные list-style-image) Единственное отличие в том, что один вид содержит ссылку, а другой - нет.

Answer 1

Нет, в CSS нет способа указать селектор в зависимости от дочерних элементов.

Вам нужно было бы добавить что-то, чтобы различать сами элементы li, например, класс для всех элементов li, содержащих ссылки.

Если вы можете использовать jQUery, вы можете добавить класс к li элементам, содержащим теги привязки:

$('li:has(a)').addClass('linkItem');

Решение, не относящееся к jQuery, может выглядеть следующим образом:

var items = document.getElementsByTagName('LI');
for (var i=0; i<items.length; i++) {
  if (items[i].getElementsByTagName('A').length > 0) {
    items[i].className = 'linkItem';
  }
}

Answer 2

уверен. Если вы даете каждому ли классу класс, вы можете сделать это просто. Или вы всегда можете сделать это, если не можете использовать классы.

ul li
{
    styles....
}
ul li a 
{ 
    styles.... 
}

Стили в первом классе будут применяться ко всем элементам li, а стили во втором классе будут применяться к тегам соответственно.

Answer 3

Для этого предназначены занятия. В HTML:

<ul>
 <li class="linked"><a...>...</a></li>
 <li>...</li>
</ul>

и в CSS

ul li {...}
ul li.linked {...}

Answer 4

Привет

Я бы добавил <p></p> тег, подобный этому:

<ul>
 <li><a...>...</a></li>
 <li><p></p></li>
</ul>

А затем примените 2 разных стиля, например:

ul a {display:block; padding:3em; background: #ccc;}
ul p {display:block; padding:3em; background: #aaa;}

Я бы не рекомендовал использовать для этого javascript, некоторые люди блокируют ect javascript. но это зависит. Я бы предпочел CSS / HTML.

Edit: По какой-то причине вы можете написать <p></p> без указания кода - Исправлено

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

Answer 5

Вы не можете сделать это только с помощью CSS, вы можете использовать Javascript для этого. Вот пример использования jQuery :

$('ul li a').each(function() {
  $(this).parent().css('list-style-image', 'url("/path/image.gif")');
});

Это установит стиль для тегов li, а не тегов a. Технически, свойство list-style-image должно быть установлено для тегов ul, а не li, но большинство (всех?) Браузеров обрабатывают его так, как вы ожидаете, когда будете индивидуально стилизовать теги li.