我定义CSS规则:
.info-specs h2, h3, h4, h5 {
font-size: 1.5em;
text-transform: none;
}
这应该只适用于类为“info-specs”的元素中的 h5。然而,经过检查,我发现其他h5元素也在使用这个规则。为什么? 下面是一个示例:
.info-specs h2, h3, h4, h5 {
font-size:5em;
text-transform: none;
}
<h5>mytest </h5>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
浏览器的 CSS 解释器将查找任何
h3、h4和h5元素,并且仅查找h2 它将查看它是否在.info-specs内。逗号或分组选择器将逗号分隔的所有内容视为单独的选择。您的问题的可能解决方案是:
/* These select for any h2, h3, h4 and h5 within .info-specs */ .info-specs h2, .info-specs h3, .info-specs h4, .info-specs h5 { text-decoration: underline; } /* These select for ant h2, h3, h4 and h5 that are direct chldren of .info-specs */ .info-specs > h2, .info-specs > h3, .info-specs > h4, .info-specs > h5 { color: red; }<div class="info-specs"> <p>In this example the headings within inf-specs will all be underlined but only the headings that are direct children of info-specs will be coloured red.</p> <h2>Heading 2</h2> <h3>Heading 3</h3> <div> <h3>Heading 3 in another div</h3> </div> <h4>Heading 4</h4> <h5>Heading 5</h5> </div>