如果有超链接,则更改列表样式类型 - 没有 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 中没有“父”选择器。您不能在给定要求的情况下向 &lt;li&gt; 元素添加圆形样式。

不过,可以将子弹添加到锚点: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 我已经更新了我的答案。您的原始演示不包含&lt;ul&gt;&lt;ol&gt;。我已经添加了它,解决方案有效,无需修改边距。【参考方案2】:

根据您的情况,向包含链接的&lt;li&gt; 元素添加一个类。

http://jsfiddle.net/k5SQe/10/

【讨论】:

如果我有一个类选择器,我可能不会发布这个查询 :) .. 无论如何感谢您的回复。 没问题,最好检查一下。很高兴您找到了解决方案!

以上是关于如果有超链接,则更改列表样式类型 - 没有 javascript/jQuery [重复]的主要内容,如果未能解决你的问题,请参考以下文章

有没有办法在有序列表中设置列表类型的样式? [复制]

更改选定颜色列表框

悬停在一个链接上时 - 更改所有其他链接的样式

jquery如何给指定的表格增加行,然后给每行插入数据,而且其中一行能有超链接的。

如果文件是 jpg,则唯一地更改样式

如何给有超链接的文本加上下划线