是所有选择器Hack还是标准？

Question

这是hack还是w3c标准？

风格：

* { background: #73102a; padding:20px;}
* * { background: #a6386b; }
* * * { background: #3b574b; }
* * * * { background: #15bf5f; }
* * * * * { background: #62bf54; }

标记：

<header>
    <menu>
        <li>
            <a>
                <span>Menu</span>
            </a>
        </li>
    </menu>
</header>

Result:

Answer 1

这不是黑客攻击。

* - 意味着什么

* * - 表示任何元素的子（或* * N子）

* * * - 表示任何孩子（或大* N孩子）的任何东西都是孩子（或者是* N孩子）。

等等。

我猜这不是一个使用这种选择器的好习惯。但如果谈论标准，那就完全正常了。

另请注意，*将包含html元素本身，但* *则不会。 * * *也不会包含body。等等。因此，他们选择的元素数量是不同的。但真正的问题是，他们选择了大量的元素（如果您的页面不像示例中那么简单），导致浏览器中的页面行为效率低下。

Answer 2

*选择所有元素。

* *选择所有元素的子元素。

* * *选择作为任何元素的子元素的子元素的所有元素。

* * * *选择作为任何元素的子元素的所有元素，这些元素是任何元素的子元素的子元素。

......我想你可以看到这是怎么回事。它只是*（任何元素）选择器和（后代）选择器（不是与浏览器相关的黑客）的组合。

我建议反对它，因为你不应该选择“任何元素”，“任何元素n级别向下”，或“任何元素n或更多级别向下”（使用*）。这是一个广泛的选择器，可以更好地替换为header > menu > li > a > span。

Answer 3

*又名任何元素选择器都是标准CSS选择器，您可以在信息：基于关系的选择器部分看到here。

关于使用它是否是一种好的做法，它的可论证以及对这个问题的正确答案，取决于：

• 如果您知道HTML的一部分是静态的，并且您的目标是精确定位特定元素，并且您不能以其他方式执行它，那么请使用any元素来抓取兄弟姐妹;

• 如果你可以遵循其他方法，更通用，比如定义一个类或id，那么就不要使用任何元素选择器，因为在处理可能包含更多元素的场景时，主要包含进一步的维护动态更改HTML。

注意（效果）

（...）以通常的方式，如果您使选择器更具体，那么您可以提高其优先级。

如果使用这些技术，则无需在文档中的这么多标记上指定class或id属性。相反，CSS可以完成工作。

在速度很重要的大型设计中，您可以通过避免依赖于元素之间关系的复杂规则来提高样式表的效率。 （...）