在CSS中区分Chrome和Safari用户代理字符串(无JavaScript)

Question

是否有一个只针对Safari的CSS选择器，以及一个只针对Chrome的CSS选择器？

为了提供一些开始，这是我认为只会选择Safari的选择器，不幸的是，事实证明它也针对Chrome：

html[data-useragent*="Safari"] {
  [...]
}

Answer 1

您可以将属性选择器与:not()选择器组合在一起：

/* Safari */
html[data-useragent*="Safari"]:not([data-useragent*="Chrome"]) {
  [...]
}

并分别：

/* Chrome */
html[data-useragent*="Safari"][data-useragent*="Chrome"] {
  [...]
}

但正如DarkDust所写的那样，你应该针对浏览器之间的特定问题，而不是整个浏览器，因为你不能依靠浏览器供应商不改变任何东西。我不得不承认，没有javascript有点难。