CSS rules are applied without classes, why?
P粉795311321
2023-09-04 13:26:05
<p>I define CSS rules: </p>
<pre class="brush:php;toolbar:false;">.info-specs h2, h3, h4, h5 {
font-size: 1.5em;
text-transform: none;
}</pre>
<p>This should only work for h5 in elements with class "info-specs". However, upon inspection, I found that other h5 elements are also using this rule. Why?
Here's an example: </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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The browser's CSS interpreter will look for any
h3,h4andh5elements, and onlyh2 it will look at Is it within.info-specs. Comma or grouped selectors treat everything separated by commas as separate selections.Possible solutions to your problem are:
/* 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>