css - 包含链接的 li 格式不同于不包含链接的 li

Question

我有这样的 list :

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

两种类型的列表元素以任意顺序多次出现。有没有办法以不同的方式格式化这些 li？ (不同的列表样式图像)唯一的区别是一种包含链接而另一种不包含链接。

Answer 1

不，CSS 中无法根据子元素指定选择器。

您必须添加一些东西来区分 li 元素本身，例如在所有包含链接的 li 元素上添加一个类。

如果可以使用 jQUery，则可以将类添加到包含 anchor 标记的 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';
  }
}