Question

p div.myclass是否是有效的CSS选择器？我想选择div.myclass，但只有当它是p的后代时才会选择。

<body>
 <div class="myclass">Do not select</div>
  <p>
    <any>...
      <div class="myclass">Select this element to set background & border
        <any>Other stuff may be here</any>
      </div>
    </any>
   </p>
  </div> <!-- added this after question was answered -->
</body>

Answer 1

这是一个有效的选择器，是的;但div不是p元素的有效子元素。因此CSS有效，但您应用该选择器的HTML无效。

顺便提一下，除了div中的嵌套p之外，您还有一个未关闭的div包裹p，后跟{{1} }} 标签。所以你的HTML是双重无效的，因为标签必须按照它们打开的相反顺序关闭。

补遗，正如评论中提到的那样（我本来不打算加入这个，而是计划专注于CSS的语法），浏览器（当然是Chromium 24 / Ubuntu 12.10）'抢救'你的HTML时它构建了DOM，所以你可以从这里开始：

</body>

对于看起来像这样的DOM（再次，在Chromium 24 / Ubuntu 12.10中）：

<p>
    <any>...
        <div class="myclass">Select this element to set background & border
            <any>Other stuff may be here</any>
        </div>
    </any>
</p>

JS Fiddle demo

因此，如果您遇到的问题以及您提出问题的原因是CSS isn't selecting/styling an element，原因仅仅是因为您使用的是无效的HTML，并且浏览器在构建时会更改您的HTML （有效）DOM，表示选择器不再与您最初定位的匹配。

这就是为什么应该遵循HTML有效性规则的原因，这使得它更容易使用（无论是现在还是将来，当您或其他人必须重新访问时）。

哦，最后，<p> <any>...</any> </p> <div class="myclass">Select this element to set background & border <any>Other stuff may be here</any> </div> <p></p>字符也应直接在HTML中使用，它应该以某种方式编码，例如&，因为{ {1}}字符是HTML字符实体代码中的第一个字符。所以...你已经创建了 triply 无效的HTML。

CSS：“p div.myclass”是一个有效的选择器吗？

1 个答案: