Html 如何正确使用[attribute=“value”]？

我刚刚意识到以下两种方法都有效。我不确定我是否可以省略标签，而只是将[type=checkbox]放进去

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

它发挥了重要作用吗？这两个版本有什么不同吗

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

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

第二版：

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

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

---

一个查找带有该参数的任何内容，另一个查找带有该参数的输入元素。一个比另一个更具体。你应该使用哪一种取决于你选择风格的需要，在这个意义上没有正确的方法。即使在这种情况下，这通常并不重要，因为大多数情况下输入都是具有该参数的唯一元素。

一个查找具有该参数的任何内容，另一个查找具有该参数的输入元素。一个比另一个更具体。你应该使用哪一种取决于你选择风格的需要，在这个意义上没有正确的方法。即使在这种情况下，这通常并不重要，因为大多数时间输入都是唯一具有该参数的元素。

第一个版本：

input[type="checkbox"]

。。。针对具有type属性且精确值为复选框1的所有输入元素

第二个版本：

[type="checkbox"]

。。。针对具有类型属性且精确值为复选框1的所有元素

与此相同：

*[type="checkbox"]

由于复选框类型仅对输入元素2有效，因此两个选择器实际上是相同的。第一版具有较高的特异性3

在以下情况下，会有显著差异

section[class="blue-background"]

[class="blue-background"]

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

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

一,

二,

3第一版：

input[type="checkbox"]

。。。针对具有type属性且精确值为复选框1的所有输入元素

第二个版本：

[type="checkbox"]

。。。针对具有类型属性且精确值为复选框1的所有元素

与此相同：

*[type="checkbox"]

由于复选框类型仅对输入元素2有效，因此两个选择器实际上是相同的。第一版具有较高的特异性3

在以下情况下，会有显著差异

section[class="blue-background"]

[class="blue-background"]

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

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

一,

二,

---

3

Fo label您指的是html元素输入或标签的html元素。从上下文来看？您会问，选择html元素输入及其属性与直接选择属性[type='*']有什么区别，对吗？对于标签，您指的是html元素输入或标签的html元素。从上下文来看？您会问，选择html元素输入及其属性与直接选择属性[type='*']有什么区别，对吗？我也阅读了该文档，但不确定要引用哪个文档。我仍然不知道哪一个是最重要的：[1]或[2]首先，我必须找出选择器级别之间的差异。@codeFixer\u 101:似乎最近更新了/TR/selectors，指向WD-selectors 4-20130502。不惜一切代价避免那个草案。它已经严重过时，我怀疑CSSWG是否认为将main/TR/selectors URL重定向到它在过去12年多甚至更长时间内指向css3选择器的极其过时的草案是合适的。我给你的建议是：遵循css3选择器标准，因为这是目前所有浏览器都使用的标准，甚至不要担心选择器-4，因为它仍在不断变化。@codeFixer\u 101:Michael\u B链接到/TR/css3选择器。他没有链接到MDN。这就是说，MDN的列表更多的是为web开发人员准备的摘要，对于css3选择器规范来说也是最新的。您的思路是正确的。@codeWood_101:啊，很抱歉给您带来了困惑。我的意思是/TR/selectors总是指向当前的css3选择器标准，直到最近，它似乎已经从2013年更新为指向L4规范。这是即将推出的标准选择器4的过时版本，应该避免。看起来他们最终更新了/TR/Selectors和/TR/Selectors-4，以指向本月初的最新草案。我也阅读了该文档，但我不确定要引用哪一个。我仍然不知道哪一个是最重要的：[1]或[2]首先，我必须找出选择器级别之间的差异。@codeFixer\u 101:似乎最近更新了/TR/selectors，指向WD-selectors 4-20130502。不惜一切代价避免那个草案。这是一个严重的问题

---

我不相信CSSWG认为将主/TR/selectors URL重定向到它在过去12年多（甚至更长时间）中指向css3选择器的极其过时的草案是合适的。我给你的建议是：遵循css3选择器标准，因为这是目前所有浏览器都使用的标准，甚至不要担心选择器-4，因为它仍在不断变化。@codeFixer\u 101:Michael\u B链接到/TR/css3选择器。他没有链接到MDN。这就是说，MDN的列表更多的是为web开发人员准备的摘要，对于css3选择器规范来说也是最新的。您的思路是正确的。@codeWood_101:啊，很抱歉给您带来了困惑。我的意思是/TR/selectors总是指向当前的css3选择器标准，直到最近，它似乎已经从2013年更新为指向L4规范。这是即将推出的标准选择器4的过时版本，应该避免使用。看起来他们最终更新了/TR/Selectors和/TR/Selectors-4，以指向本月初的最新草案。