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;
  }

II版：

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

Answer 1

第一个版本：

input[type="checkbox"]

...定位所有 input元素，其type属性的确切值为checkbox ¹。< / p>

第二个版本：

[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

Answer 2

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

如何以正确的方式使用[attribute =＆＃34; value＆＃34;]？

2 个答案: