如何区分CSS中的样式的旧浏览器和新浏览器

Question

我遇到的问题是，我不知道它们的意思是将样式规则设置为旧版浏览器的字体颜色为白色，而在较新的浏览器中设置为50％不透明度的白色，并从链接文本中删除下划线..我没有意识到有可能首先区分。

更新：我如何制作它，以便每次鼠标悬停在文字链接上时，它会显示图像代替子弹？

Answer 1

使用后备风格。首先编写普遍理解的属性，然后编写属性的较新版本，现代浏览器将使用该属性，但旧浏览器将忽略。

示例：为所有浏览器将颜色设置为白色;然后将颜色设置为白色，50％不透明度，以便了解它的浏览器。

.yourclasshere {
  color: #FFFFFF; /* standard syntax understood by all browsers */
  color: rgba(255,255,255,.5); /* new feature, ignored by old browsers */
}

不确定如何处理删除新浏览器中下划线的请求。 AFAIK所有浏览器始终了解text-decoration。也许你可以使用parent > child作为选择器。

Answer 2

在这种特定情况下，你可以使用像：

这样的后备

.selector {
    color: #fff; /* white */
    color: rgba(255, 255, 255, 0.5); /* 50% opacity white */
}

因此，当CSS规则从上到下解释时，现代浏览器会将颜色设置为透明白色。旧浏览器无法应用该规则，因为它们不支持RGBA颜色，因此#fff将占上风。