Question

这个css在这里发生了什么？ *和[]使我感到困惑，我以前从未见过它。

我意识到它是隐藏但是这意味着如果我用class =＆＃34创建一个元素;隐藏＆＃34;它会隐藏吗？

我无法在网上找到解释的内容

*[class="hide"] {
        display: none !important;
    }

Answer 1

*是匹配任何类型的单个元素的universal selector。与其他选择器结合使用时，通常可以省略星号。在您的情况下，您也可以写[class="hide"]。

方括号[]表示attribute selector，用于匹配具有特定属性和值组合的元素。在您的情况下，class="hide"是精确属性值的匹配项。因此，您正在寻找具有属性class的元素，其值正好 hide。

通常，人们会使用前导点所指示的class selector匹配class个属性。所以.hide对你来说是一个大致相同的选择器。

.hide和[class="hide"]之间存在差异：[class="hide"]只会在hide是元素的唯一类时匹配。因此，元素<div class="warning hide">…</div>将与.hide匹配，但不会与[class="hide"]匹配：

.foo {
  color: teal;
}
[class="foo"] {
  background: #EEE;
}

<div class="foo">Class and attribute selectors will match here</div>
<div class="foo bar">Only the class selector will match here</div>

在你的情况下，我不确定这是否是一个好主意，因为hide类通常用于暂时隐藏元素。因此，它只是一个类，您可以添加到元素，使其消失，并再次删除它以恢复它。通过使选择器与属性相等匹配，您实际上是在阻止自己进行切换，因为您必须主动替换所有现有的类名。

Answer 2

1。 *[class="red"]选择所有类名为 red 的元素。它与调用[class="red"]即相同。 *是多余的。

2。 [class*="red"]选择包含字符串 red 的所有元素。

＆＃13;

*[class="red"] {
  color: red
}

[class*='blue'] {
  color: blue;
}

＆＃13;

<div class="red">Test 1</div>
<div class="demo-blue-1">Test 2</div>
<div class="demo-blue-2">Test 3</div>

＆＃13;

Answer 3

rfc1155.TimeTicks.clone = counterCloneHack是一个外卡选择器，适用于所有元素，例如*适用于直接位于div>*。

下的任何元素

括号表示要匹配的元素的属性，因此该行适用于具有值为div的{{1}}属性的任何元素，尽管我认为合乎逻辑的事情就是定义改为上课class。

Answer 4

此问题可能与this

重复

*[class="hide"]会选择class="hide"

的任何内容