程序员经验分享-hwhale

为什么相邻同级选择器不起作用？ [关闭]

2024-04-19

根据相邻同级选择器的定义，以下代码应该可以工作。然而事实并非如此。我似乎没有发现任何错误。

<!DOCTYPE html>
<html>
<head>
<style>

#p2+h4{
    color:red;
}

</style>
</head>

<body>
    <p>
        <p id="p2">This is the sibling of the selected para</p>
        <p>
            <h4>this should not be colored</h4>
        </p>
        <h4>this should be colored</h4>
    </p>    
</body>
</html>

H4 is not 紧接着之前 by the #p2。您应该使用更宽松的同级选择器~（一般兄弟组合器）：

#p2 ~ h4

规格 http://www.w3.org/TR/selectors/#selectors

  • E + FF元素立即地前面有 E 元素
  • E ~ FF 元素前面有 E 元素

重要的

但正如许多其他人在评论中建议的那样（并且在答案中无效），您的 HTML 无效。您不能只嵌套不应该嵌套的元素。浏览器会reformat它符合规格 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content。段落元素只能包含短语内容。

属于短语类别的元素是<abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and 纯文本（不仅由空格字符组成）。

其他一些元素也属于此类别，但前提是满足特定条件：

  • <a>，如果它只包含短语内容
  • <area>，如果它是某个元素的后代
  • <del>，如果它只包含短语内容
  • <ins>，如果它只包含短语内容
  • <link>，如果 itemprop 属性存在
  • <map>，如果它只包含短语内容
  • <meta>，如果 itemprop 属性存在

基于浏览器重新格式化的 HTML，两个标题都会变成彩色，因为它们都成为了同级标题#p2段并且前面都有相同的段落。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

cssselectors

为什么相邻同级选择器不起作用？ [关闭] 的相关文章

随机推荐

热门标签