如果有超链接,则更改列表样式类型 - 没有 javascript/jQuery [重复]
Posted
技术标签:
【中文标题】如果有超链接,则更改列表样式类型 - 没有 javascript/jQuery [重复]【英文标题】:Change list-style-type if it has a hyperlink - without javascript/jQuery [duplicate] 【发布时间】:2012-05-07 00:22:32 【问题描述】:可能重复:Complex CSS selector for parent of active child
我有以下代码:
<li>
<a href="jsfiddle.net">Text</a>
</li>
<li>
only text
</li>
我已将 css 应用于 li 元素:
li list-style-type: circle;
我希望悬停时的元素 li 应该具有 list-style-type:disc,但仅当它具有 锚元素在里面。我知道这是使用 javascript 的小菜一碟,但是没有 javascript 是否可以实现这一点?
我尝试过这样的事情,但无法实现:http://jsfiddle.net/k5SQe/
【问题讨论】:
【参考方案1】:CSS 中没有“父”选择器。您不能在给定要求的情况下向 <li>
元素添加圆形样式。
不过,可以将子弹添加到锚点:http://jsfiddle.net/k5SQe/31/
li:hover a
display: list-item;
list-style-type: disc;
【讨论】:
感谢 Rob 的回复。但是多余的 margin-left 会导致出现两个不好看的子弹。 @Ankit 边距只是一个例子。调整它以满足您的需求。 我尝试更改边距值,但如果我给出 0em ,它根本不会显示。似乎单独使用 CSS 是不可能的 :( .. 无论如何 +1 为你的努力。 查看此截图i46.tinypic.com/5nngub.png。我可以在悬停时看到 2 个子弹。 @Ankit 我已经更新了我的答案。您的原始演示不包含<ul>
或<ol>
。我已经添加了它,解决方案有效,无需修改边距。【参考方案2】:
根据您的情况,向包含链接的<li>
元素添加一个类。
http://jsfiddle.net/k5SQe/10/
【讨论】:
如果我有一个类选择器,我可能不会发布这个查询 :) .. 无论如何感谢您的回复。 没问题,最好检查一下。很高兴您找到了解决方案!以上是关于如果有超链接,则更改列表样式类型 - 没有 javascript/jQuery [重复]的主要内容,如果未能解决你的问题,请参考以下文章