Question

我是css的新手。有人可以帮助我区分“#test”和“div #test”吗？

<html>
  <head></head>
  <body>
  <div>
    <span>Some stuff here..</span>
  </div>
  <div id="test">
    <span>This is my data</span>
  </div>
  </body>
</html>

Answer 1

您真的不应该使用MDN的标记名限定ID，如下所示：

不要使用标记名称或类
限定ID规则
如果规则有ID   选择器作为其键选择器，不要将标记名称添加到规则中。   由于ID是唯一的，因此添加标记名称会降低匹配速度   过程不必要

Answer 2

主要区别在于特定体重的变化。

执行#id比div＃id

更具体

这意味着您使用了div #id规则，因为它具有更高的特定值

div#id {background: #000} 
#id {background: #fff}

具有该ID的div的背景将为黑色，即使之后选择了其他规则

Answer 3

#test将使用ID为 test 的元素，而div#test只会使用名为 test <的id div / strong>即可。这不会产生很大的不同，因为ids必须是唯一的。

这种信息很容易找到，您可能需要查看W3schools documentation

Answer 4

#id＆amp; div＃id仅在将样式应用于该元素时才有所不同。

浏览器通过计算特异性来计算最相关的元素。

特异性计算规则在以下链接中 https://www.w3.org/TR/CSS22/cascade.html#specificity

#id将是0100 和div＃id将是0103

那么，如果你写

，数字意味着什么

div#id {
  background: green;
}

#id {
  background: red;
}

框的颜色为绿色

参考： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 5

#id 是选择id =“firstname”的元素。它是一种CSS选择器。

检查https://www.w3schools.com/cssref/css_selectors.asp

处的所有CSS选择器

存在细微差别。

使用div＃id 时，它只适用于附加到div的#id。否则，该规则将被忽略。

希望它有所帮助。感谢

Answer 6

当你使用div #id时，它只适用于附加到div的#id。 div＃id的特异性大于#div的特异性。

Answer 7

<html>
<style>
    div#test {
    background: green;
}
inspector-stylesheet:1
#test {
    background: red;
}
</style>
<body><div>
    <span>Some stuff here..</span>
  </div>
  <div id="test">
    <span>This is my data</span>
  </div></body>
<span id="test">This is my data</span>
</html>

基本上id是唯一的，但是为了显示元素与组合div #id一起使用时的具体情况如果有两个不同的元素对两个不同的元素进行测试那么强者将是指定的元素，如div＃id

Answer 8

如下所示，div#test是仅适用于ID为test的div的选择器。 #test会选择ID为test的所有元素。

但是，由于你不应该多次使用id，这应该不是问题。 div#test只会减慢DOM中的匹配速度，因此您不应该使用它。

需要明确的是：如果链接元素和ID，则更具体。这意味着，这些规范将始终覆盖不太具体的规范。

div#test{color:green}
#test{color:red}

颜色为绿色。

如果你的意思是div #test，那就是链接DOM树。

div#test{ float:right}
#test{color:green}
div #test{margin-left:60px}

<html>
  <head></head>
  <body>
  <div>
    <span>Some stuff here..</span>
  </div>
  <div id="test">
    <span>This is my data</span>
  </div>
  <span id="test">no data</span>
  <div>
    <span id="test">heres data</span>
  </div>
  <div>
    <p>
      <span id="test">heres data aswell</span>
    </p>
  </div>
  </body>
</html>

Answer 9

特异性不同（div#test一个更高），div#test仅适用于div，而不适用于其他标签。

div#test特异性为0101

#test特异性是0100

Specificity Calculator

#id和div＃id之间的区别

9 个答案: