包含链接的 CSS 样式列表

Question

早上好，

我有一个 CSS 问题，这让我很困惑。我有一个带有自定义元素符号图像的无序列表:

.mainTable ul {
    list-style-position: inside;
    list-style-image: url(../img/bullet_white.png);
    line-height: 18px;
    color: #335;
}

现在有些列表项包含链接，有些则不包含。对于那些这样做的人，我希望子弹在翻转时改变。您不会觉得太棘手...以下是我的标记方式:

.mainTable ul li a:link {
    padding-left:0px; // using padding as a test
}
.mainTable ul li a:hover {
    list-style-image: url(../img/bullet_red.png);
    padding-left:2px; // padding changes (moves link text), but bullet's still white
}

现在我已经怀疑(随着填充的变化)样式被应用到内部链接，而不是“li”容器。我试过测试:

.mainTable ul li:hover

图像发生变化，但它会针对范围内的所有“li”标签发生变化(因为这是我告诉它要做的)，但这不是我想要的。必须有一种不借助 js 的简单方法来执行此操作，但如果我能弄清楚，我会被打扰的。

有什么建议吗？非常感谢所有帮助(即使只是“你需要使用 js”):)

丹尼

搞定了! (还不能回答我自己的问题——出于某种原因……)

感谢大家的提醒。答案是上述建议的混合体。将元素符号从 li 标签移到 anchor 上是一种享受，但没有链接的列表项没有元素符号......DOH!

然后我设置了另一个类“notALink”，并将我的默认列表样式固定在上面。如果有人感兴趣，这是标记...

.mainTable ul { /* kill formatting on the ul */
    list-style-position: inside;
    line-height: 18px;
    color: #335;
    list-style-type: none;
}
.mainTable ul li a:link { /* link becomes the list, essentially */
    list-style-image: url(../img/bullet_white.png);
    list-style-position: inside;
    display: list-item;
}
.notALink { /* looks like link above, just ain't a link */
    list-style-image: url(../img/bullet_white.png);
    list-style-position: inside;
    display: list-item;
}
.mainTable ul li a:hover { /* changes the bullet image on rollover - nugget! :) */
    list-style-image: url(../img/bullet_red.png);
}

工作正常 - 干杯，你把我从我自己挖的小坑里挖出来

丹尼

Answer 1

不，没有办法在纯 CSS(2 或 3)中更改子鼠标悬停时的父级。请参阅:Is there a CSS parent selector?

所以你有两个选择:

使用JavaScript

或

将列表样式保留为空并向子项添加元素符号(a 或其他)。这样，您将更改 a 的样式，而不是 li。这就是我要做的；]

或(来自易江评论)

向包含 a 的 li 元素添加额外的类