如何正确使用 [attribute="value"]？

Question

我刚刚意识到以下两种方式都有效。我不确定我是否可以省略 label 而只是输入 [type="checkbox"]。

我很困惑，因为documentation 与教程和人们的代码不同。有些人使用元素，有些人忽略它们。

它起着重要的作用吗？这两个版本有什么区别吗？

如果有经验丰富的人给我一些建议，我将不胜感激。

<form action="/submit-your-photo" id="your-photo">
    <p>How would you describe yourself?</p>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="your photo URL" required>
    <button type="submit">Submit</button>
</form>

CSS：

我的版本：

 input[type="checkbox"]{
    margin: 20px 10px;
  }

第二版：

[type="checkbox"]{
    margin: 20px 10px;
  }

Answer 1

一个查找具有该参数的任何内容，另一个查找具有该参数的输入元素。一个比另一个更具体。您应该使用哪一个取决于您在选择要样式的东西时的需要，从这个意义上说，没有“正确的方法”。 （尽管在这种情况下它通常并不重要，因为大多数时候输入将是唯一具有该参数的元素。）

Answer 2

第一个版本：

input[type="checkbox"]

... 目标所有 input 元素 具有 type 属性的确切值是 checkbox ¹。

第二个版本：

[type="checkbox"]

... 定位所有具有type 属性且确切值为checkbox ¹ 的元素。

和这个是一样的：

*[type="checkbox"]

由于checkbox 类型仅对input 元素² 有效，因此两个选择器实际上是相同的。第一个版本具有更高的特异性³。

在以下情况下，会有显着差异。

section[class="blue-background"]

[class="blue-background"]

在第一种情况下，只有具有该类-值对的 section 元素获得蓝色背景。

在第二种情况下，具有该类-值对的所有元素都会获得蓝色背景。

---

¹https://www.w3.org/TR/css3-selectors/#selectors

²https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#checkbox-state-typecheckbox

³https://stackoverflow.com/a/35657646/3597276