Question

目标是使用jQuery对css3 nth-child伪类进行pollyfill。因此，我需要解析css规则并使用jQuery为不支持nth-child直接来自css的旧浏览器重新应用它们。所以我写了一些代码，但我很确定类似的东西应该已经存在，例如在github上。可能是某人已经遇到过这样的问题？这是我的代码：

        // if ie7 or ie8
        if (!$.support.leadingWhitespace) {         

            var aStyleSheetList = document.styleSheets,
                aRules = [],
                current = '',
                aSelectors = [];

            for (var i = 0; i < aStyleSheetList.length; i++) {
                aRules = aStyleSheetList[i].cssRules || aStyleSheetList[i].rules;
                for (var j = 0; j < aRules.length; j++) {
                    current = aRules[j];
                    if (current.selectorText && current.selectorText.indexOf('nth-child') !== -1) {
                        aSelectors.push([current.selectorText, current.cssText.substring(current.cssText.indexOf('{') + 1, current.cssText.indexOf('}'))]);
                    }
                }
            }

            var jqCssObject = {},
                declarations = [],
                keyValuePair = [];

            for (var k = 0; k < aSelectors.length; k++) {
                declarations = aSelectors[k][1].split(';');
                for (var m = 0; m < declarations.length; m++) {
                    keyValuePair = declarations[m].split(':');
                    jqCssObject[keyValuePair[0]] = keyValuePair[1];
                }
                $(aSelectors[k][0]).css(jqCssObject);                   
            }

        }

Answer 1

如果您想在旧浏览器中使用nth-child等伪选择器，可以选择使用 Selectivizr ：

“Selectivizr是一个模拟CSS3伪类的JavaScript实用程序和Internet Explorer 6-8中的属性选择器。“

由于您已经在使用jQuery，所以您只需在页面中包含Selectivizr <script>，您就可以兼容旧浏览器中的各种伪/属性选择器。

是否有任何JavaScript库用于解析用于jQuery的css规则？

1 个答案: