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

Question

是否有一种 CSS 选择器只针对 Safari，而另一种只针对 Chrome？

作为开始，这是我认为只会选择 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，这有点困难。