使用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> ed样式表中读取。

问题

如何让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> ed样式表，但不适用于页面<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()。