如何检查浏览器是否支持 CSS 通用兄弟选择器~答案

【问题标题】：How to check if browser supports CSS general sibling selector ~如何检查浏览器是否支持 CSS 通用兄弟选择器~
【发布时间】：2019-10-25 21:31:18
【问题描述】：

如果浏览器支持 css 通用兄弟选择器~，我如何使用 Javascript (jQuery) 进行测试？

例子：

#toggled:checked ~ #sidebar {
    display: block;
}

该 CSS 代码在 IE 8-、Firefox 3-、Safari 3.1- 中不起作用，因此在这些情况下，我需要应用 Javascript 替代方案来显示 #sidebar 块。

【问题讨论】：

使用 JavaScript 看看是否可见？
更笼统地说，stackoverflow.com/questions/21094865/… 可能，但如果你走得那么远，你可能不得不为那个答案中的方法填充 querySelector，我不确定 @987654326 是否@ (Javascript) 将始终与浏览器的 CSS 选择器实现匹配
通用兄弟选择器声明它支持 IE7、safari 3 和 firefox 1。所以我认为在这种情况下，它是 :checked 选择器在 IE8 中不起作用，因为它应该是 IE9+ .所以也许您可以将其更改为#toggled.checked ~ #sidebar，然后在单击时使用JS 从切换元素中添加/删除.checked 类。乍一看应该是 IE8 兼容的。

标签： javascript jquery css-selectors cross-browser

【解决方案1】：

@epascarello 在 cmets 中是对的，为什么不用 JS？

例如，在 JS 中（未经测试 - 使用 jQuery）：

let isRuleApplied = (selector, keyApplied, valueApplied) => {
  let element = $(selector);
  return element && element.css(keyApplied) === valueApplied;
};

console.log(isRuleApplied('#toggled:checked ~ #sidebar', 'display', 'block'));

或者只使用getElementById节点的style属性，或者使用Vanilla JS的querySelector。

感谢 here 的想法。

【讨论】：

原帖中的想法很有效，感谢您的解决方案！