我无法使用document.querySelectorAll（'*：focus'）

Question

我必须选择每种焦点背景颜色样式并对其进行控制以更改其b.colors。

我在下面的代码中编写了代码，但是它不起作用：

当我仅向选择器写入*时，所有想要的目标都完成了。但是，当我向选择器添加*：focus时，无法更改焦点样式的背景色。为什么？

jQuery(document).ready(function(){

});

window.console = window.console || (function(){
    var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
    return c;
})();


jQuery(document).ready(function($) {
    "use strict"

    document.querySelectorAll('*,*:focus').forEach(function(node) {
        const style = window.getComputedStyle(node);
        const color = style.getPropertyValue('color');
        const Bcolor = style.getPropertyValue('background-color');

        if (color === 'rgb(22, 160, 133)') {

            $("ul.colors .color1").on('click', function() {
                node.style.setProperty("color", "red", "important");
                return false;
            });

            $("ul.colors .color2").on('click', function() {
                node.style.setProperty("color", "pink", "important");
                return false;
            });

        }

            if (Bcolor === 'rgb(22, 160, 133)') {

            $("ul.colors .color1").on('click', function() {
                node.style.setProperty("background-color", "red", "important");
                return false;
            });

            $("ul.colors .color2").on('click', function() {
                node.style.setProperty("backgroundColor", "pink", "important");
                return false;
            });

        }


    });

        $("#color-style-switcher .bottom a.settings").on('click', function(e) {
            e.preventDefault();
            var div = $("#color-style-switcher");
            if (div.css("left") === "-195px") {
                $("#color-style-switcher").animate({
                    left: "0px"
                });
            } else {
                $("#color-style-switcher").animate({
                    left: "-195px"
                });
            }
        })

        $("ul.colors li a").on('click', function(e) {
            e.preventDefault();
            $(this).parent().parent().find("a").removeClass("active");
            $(this).addClass("active");
        })
}); 

Answer 1

querySelectorAll选择元素。 *:focus将选择当前具有:focus伪类的任何元素。

它不选择规则集。您不能使用它来确定将来会成为焦点的元素的样式。

如果要执行此操作，则需要使用StyleSheet API遍历规则集。