0

我必须使用该!important属性才能使悬停样式生效。如果没有我包括该!important属性，下面的代码将无法工作。这是为什么？

非工作代码

#sbw a.content_copy:link {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:visited {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:hover {
    color: #ffffff;
    background-color: #F12B63;
    padding: 10px;

}

工作代码

#sbw a.content_copy:link {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:visited {
    color: #F12B63;
    padding: 10px;
}

#sbw a.content_copy:hover {
    color: #ffffff !important;
    background-color: #F12B63;
    padding: 10px;

}
4

2 回答 2

1

:visited带有和的规则:link可能看起来更具体。

你可以这样做：

#sbw a.content_copy:hover, #sbw a.content_copy:visited:hover, #sbw a.content_copy:link:hover {
    color: #ffffff;
    background-color: #F12B63;
    padding: 10px;
}
于 2013-01-04T09:23:07.990 回答
1 
color: #ffffff !important;

这只确保#ffffff始终应用悬停颜色。例如 ：-

p { color: red !important; }
 p { color: blue; }

因为paragraph无论第二行 CSS 是什么，颜色都将始终为红色。

为什么要使用!important
假设您正在为您的页面编写 css，您在 p { color: red ;} 第一行添加了一个样式，但后来您再次 p { color: blue;}为相同的元素添加了，所以您的第一个样式将消失，并且浏览器始终会应用第二个样式。因此，如果您添加!important您的样式，它会强制浏览器仅使用该样式。

于 2013-01-04T09:40:49.827 回答