Seems like I'm stucked. Why does the code below display a message of 12px, but not 50px? Isn't class1 have the highe How to fix it if I'm not allowed to change the * properties? Even !important does not help.
<html>
<head>
<style type="text/css">
*
{
font-size : 12px
}
.class1
{
font-size : 50px;
}
</style>
</head>
<body>
<div class="class1">
<span>why it is not 50px font size?</span>
</div>
</body>
</html>
That's because * also selects the <span> tag inside your <div>.
So * is more specific in this case and thus has priority.
.class1 span
{
font-size : 50px;
}
The above would work.
Or You can use !important
.class1 {font-size : 50px !important;}
A working example:
http://jsfiddle.net/gWQeZ/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With