用CSS4来模拟jQuery的主题选择器？

Question

引言

因此，CSS4规范的一部分是 selector。

E! > F

这种令人兴奋的选择器语法允许基于其子元素(E!)的父元素(F)的样式。一个例子是：

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

在上述情况下，LI元素是样式化的，而不是P元素！

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

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

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

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

目前，我可以让jQuery从页面上的<style>标记中读取CSS，但不能从<link>样式表读取CSS。

问题

如何让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()。