Html id和标记之间的CSS选择器优先级_Html_Css_Css Specificity

Html id和标记之间的CSS选择器优先级

html css

Html id和标记之间的CSS选择器优先级,html,css,css-specificity,Html,Css,Css Specificity,我知道id比class更具体，class比tag更具体 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Sample document</title> <link rel="stylesheet" href="style1.css"> </head> <body> <p id="f

我知道

id

比

class

更具体，

class

比

tag

更具体

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p id="first">
      <strong class="carrot">C</strong>ascading
      <strong class="spinach">S</strong>tyle
      <strong class="spinach">S</strong>heets
    </p>
    <p id="second">
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
  </body>
</html>

结果是：

正如我在第一段所预期的那样。但是我希望第二段的第一个字母也是青色的，因为

id

比

tag

更具体CSS的特殊性不会强制选定元素的后代从其父元素继承属性值

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p id="first">
      <strong class="carrot">C</strong>ascading
      <strong class="spinach">S</strong>tyle
      <strong class="spinach">S</strong>heets
    </p>
    <p id="second">
          <strong>C</strong>ascading
          <strong>S</strong>tyle
          <strong>S</strong>heets
        </p>
  </body>
</html>

#second

与元素

不匹配，但
strong
与元素匹配。
CSS特殊性不会强制选定元素的后代从其父元素继承属性值

#second
与元素
不匹配，但strong 与元素匹配。由于我认为昆汀的答案不太正确，或者至少有点误导，我的解释如下： ID选择器将元素与相应的ID匹配关于继承，请查看。第6.1.1段规定的值表示：用户代理必须首先根据以下机制（按优先顺序）为每个属性分配指定的值：如果级联产生一个值，请使用它否则，如果属性被继承，并且元素不是文档树的根，则使用父元素的计算值否则，请使用属性的初始值。每个属性的初始值在属性的定义中指示因此父元素（）的颜色值将被继承（并非所有属性都是可继承的）到子元素（），但由于强元素的样式规则，因此满足第1点或者换句话说：只有在没有为相应元素定义其他样式规则时，继承才会生效还要注意，所有用户代理都有一个默认样式表由于我认为昆汀的回答不太正确，或者至少有点误导，我的解释如下： ID选择器将元素与相应的ID匹配关于继承，请查看。第6.1.1段规定的值表示：用户代理必须首先根据以下机制（按优先顺序）为每个属性分配指定的值：如果级联产生一个值，请使用它否则，如果属性被继承，并且元素不是文档树的根，则使用父元素的计算值否则，请使用属性的初始值。每个属性的初始值在属性的定义中指示因此父元素（）的颜色值将被继承（并非所有属性都是可继承的）到子元素（），但由于强元素的样式规则，因此满足第1点或者换句话说：只有在没有为相应元素定义其他样式规则时，继承才会生效还要注意，所有用户代理都有一个默认样式表首先，您需要知道浏览器对id、类和标记的反应。这样你就可以很容易地控制。。顺便说一句，你的意思是这样的吗？首先你需要知道浏览器对id、类和标记的反应。这样你就可以很容易地控制。。顺便问一下，你的意思是这样的吗？你认为@Quentin的回答有什么不正确或误导性？我理解你的回答，但我觉得有点困惑，例如，浏览器默认样式表与问题无关，正确的技术术语是“继承”，而不是“继承”。谢谢你的提示-更正。昆廷的回答没有“错误”，但“CSS的特殊性不会迫使选定元素的后代从其父代继承属性值。”这与人们会说的一样：“天气不会迫使选定元素的后代从其父代继承属性值。”！这也是正确的，但并没有触及为什么结果不是预期的OP。问题出现在第二句中：“#second与元素不匹配，但strong与之匹配。”，但不容易识别。我还指出“用户代理默认样式表”的原因是，它们也可能出于相同的原因影响继承（第1点）-看看你认为@Quentin的回答中有什么不正确或误导？我理解你的回答，但我觉得有点困惑，例如，浏览器默认样式表与问题无关，正确的技术术语是“继承”，而不是“继承”。谢谢你的提示-更正。昆廷的回答没有“错误”，但“CSS的特殊性不会迫使选定元素的后代从其父代继承属性值。”这与人们会说的一样：“天气不会迫使选定元素的后代从其父代继承属性值。”！这也是正确的，但并没有触及为什么结果不是预期的OP。问题出现在第二句中：“#second与元素不匹配，但strong与之匹配。”，但不容易识别。我还指出“用户代理默认样式表”的原因是，它们也可能出于相同的原因影响继承（第1点）-请参阅