<p>我定义CSS规则：</p>
<pre class="brush:php;toolbar:false;">.info-specs h2, h3, h4, h5 {
font-size: 1.5em;
text-transform: none;
}</pre>
<p>这应该只适用于类为“info-specs”的元素中的 h5。然而，经过检查，我发现其他h5元素也在使用这个规则。为什么？
下面是一个示例：</p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.info-specs h2, h3, h4, h5 {
font-size:5em;
text-transform: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><h5>mytest </h5></code></pre>
</p>
1
912
收藏
浏览器的 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>