Question

我有一个名为.item的calss，它非常复杂。我想更改悬停颜色而不将所有类名复制到另一个名称只是为了改变悬停颜色。将000000颜色更改为FC0000的简单方法是什么？

.item-test a.hover .thumb {
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    border-left-color-value: #000000;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-left-style-value: solid;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-left-width-value: 5px;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-right-color-value: #000000;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-right-style-value: solid;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-right-width-value: 5px;
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 5px;
    overflow-x: hidden;
    overflow-y: hidden;
}

Answer 1

只需添加一个新的CSS定义：

.item-test a.hover .thumb:hover {
    border-color: #FC0000;
}

此处使用的选择器.item-test a.hover .thumb:hover比上面使用的选择器更具体（因为它有一个额外的伪类），因此它将优先于它。请参阅CSS 2 – The Cascade。

Answer 2

这可能是我见过的效率最低的CSS ...

.item-test a.hover .thumb{
    border: 5px solid #000;
    overflow:hidden;
}

会做同样的事情。

要对悬停进行更改，您只需：

.item-test a.hover .thumb:hover{
    border-color:#FC0000;
}

但是，有些浏览器不支持：hover psuedo类，除非它是achor。幸运的是，似乎你有一个.thumb嵌套在achor中，所以你应该这样做以确保完全兼容性：

.item-test a:hover .thumb:hover{
    border-color:#FC0000;
}

在不添加新类的情况下更改css中的颜色？

2 个答案: