这是什么意思？ * [class =“hide”] in css

Question

这是怎么回事这个CSS？ *和[]让我感到困惑，我从未见过它。

我知道它隐藏起来，但是这意味着如果我用class =“hide”创建一个元素，它会隐藏它吗？

我不能在网上找到什么解释呢

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

Answer 1

*是一个外卡选择，并适用于所有的元素，例如div>*适用于直接在div下的任何元素。

括号表示元素的属性相匹配，所以这条线适用于具有class属性与价值hide任何元素，但我认为顺理成章的事情本来只是定义类.hide代替。

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

Answer 2

1.*[class="red"]选择与类名称完全红色所有元素。这跟调用[class="red"]即是一样。 *是多余的。

2.[class*="red"]选择与包含字符串中它红色类名的所有元素。

*[class="red"] { 
 
    color: red 
 
} 
 

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

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

Answer 3

这个问题可能是重复与this

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

Answer 4

的*东西是任何类型的单个元素相匹配的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类通常是用来暂时隐藏元素。所以这只是一个可以添加到元素中的类，以使其消失并再次将其删除以将其恢复。通过选择符匹配属性相等性，您基本上阻止了您的切换能力，因为您必须主动替换所有现有类名称。