Css set a property for h2 to h6 for a specific class
I have a div
, inside different <h>
tags.
I would like to apply some formatting to ALL <h>
tags inside specifically to any with class cnt ONLY.
At the moment I'm using the following CSS without success... Any ideas what I'm doing wrong and how to fix it?
<div class="cnt">
<h1>Some Text.</h1>
<h2>Some Text.</h2>
<h3>Some Text.</h3>
<h4>Some Text.</h4>
<h5&开发者_如何转开发gt;Some Text.</h5>
<h6>Some Text.</h6>
</div>
h2 h3 h4 h5 h6 .cnt
{
font-size:16px;
font-weight:700;
}
.cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6 {
font-size:16px;
font-weight:700;
}
read up on css specificity
.cnt h1, .cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6 {
font-size:16px;
font-weight:700;
}
captainclam has the right answer, but just so you understand a little about why it didn't work, the following selector:
h2 h3 h4 h5 h6 .cnt
would represent something like the following:
<h2><h3><h4><h5><h6><div class="cnt"></div></h6></h5></h4></h3></h2>
(anything with class cnt could be put in h6 for it to apply)
@Ross, it had nothing to do with specificity; The selector was wrong.
Try this:
div.cnt h1, div.cnt h2, div.cnt h3, div.cnt h4, div.cnt h5, div.cnt h6
{
/* ... */
}
精彩评论