jquery - 使用 jQuery 模拟 CSS4 主题选择器？

Question

简介

CSS4 规范的一部分是 subject selector .

E! > F

这个令人兴奋的选择器语法允许根据子元素 ( E! ) 设置父元素 ( F ) 的样式。一个例子是:

/* style the LI element */
ul > !li > p { border: 1px solid #ccc; }

在上面的例子中，LI 元素被设置了样式，而不是 P 元素!

目前没有浏览器支持此选择器。我想做的是创建一个 jQuery 插件

a) 检查浏览器是否支持此选择器，

b) 如果没有，则检查 CSS 样式是否有匹配的选择器

c) 实现与选择器关联的样式。

目前我可以让我的 jQuery 从 <style> 读取 CSS页面上的标签，但不是来自 <link>编辑样式表。

问题

如何让 jQuery 读取所有加载样式的所有选择器？

测试浏览器是否支持此选择器的最佳方法是什么？我正在考虑创建一个隐藏元素，向页面添加样式，并测试父级的 css。像这样的东西(但更有效):

//Create elements
jQuery('<div/>', {
    id: 'selectorTester',
}).appendTo('body');
jQuery('<p/>', {
    id: 'selectorTesterP',
}).appendTo('#selectorTester');
jQuery('<style/>', {
    id: 'selectorTesterStyle',
    text: 'div#selectorTester! > p#selectorTesterP {color:red;}'
}).appendTo('body');
//Test if div has the correct style
if(jQuery('div#selectorTester').css('color') !== 'red') {
    // rest of script
}

Answer 1

此代码适用于 <link>编辑样式表，但不在页面上 <style>脚本。

//get loaded stylesheets
var x, sheets,classes;
for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){
  classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;

  //check each rule for css4 selector
  for(x=0;x<classes.length;x++) {
    if(classes[x].selectorText.indexOf(':has(' > -1)) {
      //execute code here
    }
  }
}

此脚本假设新的主题选择器更改为 :has() .