Question

我有这样的清单：

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

其中两种类型的聆听都以任意顺序多次出现。有没有办法格式化这些李的不同？（不同的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元素，第二个类中的样式将应用于＆lt; a＆gt;标签分别。

Answer 3

单独使用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标签样式时的方式处理它。

Answer 4

你好

我会像这样添加<p></p>标记：

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

然后应用两种不同的风格：

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

我不建议使用javascript，有些人阻止javascript等。但这取决于。我会更喜欢css / html。

修改出于某种原因，您可以编写<p></p>而无需编写代码 - 已修复

另外，我可能忽略了你想要应用list-style-image，然后这将无效。

Answer 5

这是课程的用途。在HTML中：

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

和CSS

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

格式li包含与li不同的链接，不包含链接

5 个答案: