Question

如果我在页面上有几个子弹，而某些列表包含普通文本（没有段落元素），而某些列表包含链接，是否可以在链接上没有项目符号，但文本项目上有项目符号？

删除我所做的所有项目符号：

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px; list-style-type: none}

但如果该项目是链接，我想显示子弹。我尝试过：

#WebPartWPQ1 li ,#WebPartWPQ2 li ,#WebPartWPQ3 li ,
#WebPartWPQ4 li,#WebPartWPQ5 li,#WebPartWPQ6 li,
#WebPartWPQ6 li {margin-left: -25px;}

#WebPartWPQ1 li a ,#WebPartWPQ2 li a ,#WebPartWPQ3 li a ,
#WebPartWPQ4 li a,#WebPartWPQ5 li a,#WebPartWPQ6 li a,
#WebPartWPQ6 li a {margin-left: -25px; li ast-style-type: none}

没有成功，有什么想法吗？

Answer 1

您将不得不求助于服务器端预处理或Javascript。 CSS中没有办法根据子元素的元素设置元素的样式，或者从子元素的样式声明中更改父元素的样式。这是W3 CSS2 Selector Reference和CSS3 working draft Selector reference，它们都没有提到父选择器。

Answer 2

虽然你不能根据它包含的任何元素来改变列表元素的样式，但是有一个纯粹的CSS解决方法可以获得或多或少相同的结果：

将block设置为所有列表元素的显示属性
将list-item设置为链接元素的显示属性，以及list-style-position和list-style-type的有效值。

因此，当您的列表项包含链接时，不是让列表项看起来像列表项，而是让列表项中的链接表现得像列表项。

你的子弹将与你的链接颜色相同，但这是关于这种方法与你想到的方法之间的唯一区别（这是不可能的）。

示例代码：

＆＃13;

#WebPartWPQ1 li {
    margin-left: -25px;
    display: block;
}

#WebPartWPQ1 li a {
    display: list-item;
    list-style-position: inside;
    list-style-type: disk;
}

＆＃13;

<ul id="WebPartWPQ1">
    <li>Item 1 (ordinary item)</li>
    <li><span>Item 2 (wrapped in a "span" tag)</span></li>
    <li><a href="#">Item 2 (wrapped in an "a" tag)</a></li>
</ul>

＆＃13;

THE FIDDLE：

<强> http://jsfiddle.net/6kt8jhfo/5/

list-style-type：当列表项是链接时为none，当列表项不是链接时显示项目符号？ CSS

2 个答案: