如果有超链接，则更改列表样式类型 - 没有 javascript/jQuery [重复]

Posted 2023-03-06

【中文标题】如果有超链接，则更改列表样式类型 - 没有 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/

【讨论】：

如果我有一个类选择器，我可能不会发布这个查询 :) .. 无论如何感谢您的回复。

没问题，最好检查一下。很高兴您找到了解决方案！