Is it possible to prevent CSS font style propagation?

I have a plugin which outputs a profile section, and I plan to wrap it with an ol>li element. I want to style the list numbers using a different font size/style/color. But if I do that the font style will propagate/cascade into the profile. I don't want to restyle every t开发者_C百科ext inside the profile again. So is it possible to prevent the font style from propagating into the descendant elements?

<style>
#rank li{
  font-size:50px;
  font-style: italic;
  font-family: serif;
  font-weight: bold;
  width:70px;
  margin-right:10px;
  text-align:center;
}
</style>
<ol id="rank">
  <li>
    <div class="profile">
      <!-- contains complex stuffs including tables, floated div for displaying profiles-->
    </div>
  </li>
</ol>

EDIT: Sorry, I over exaggerated about 'restyling every text again'. I think if I need to make profile style unaffected again, I would need to know the default font styles outside the ul, and apply them in the div. It's not much work, but in the future, one need to modify two places to keep the overall style consistent.

---

Sorry, but no. All font properties cascade (the "C" from CSS) into all child elements and there is no way to prevent it. You're going to have to reset the properties on the child elements if you don't want the same font.

One thing you can, potentially, do is not actually change the font on the <li>, but on a container near it. This will only work in newer browsers, if it works for you, great :) :

ol {
  list-style-type : none;
}

ol > li:before {
  content           : counter(list_counter) " ";
  counter-increment : list_counter;
  float             : left;
  font-family       : verdana;
}

ol:first-child {
  counter-reset: list_counter;
}

---

You could "reset" the font style on all child elements. It's not actually resetting but it should work with the universal selector. But be carefull since this will actually enforce the font on all child elements, so if you selector is more specific than others it might in the end still affect other elements.

Check this fiddle for an example: http://jsfiddle.net/79ZK5/1/

---

As I understand this is related to the selector priority that you can use to override the style. Have a look here to understand the Priority of Styles. If you specify the style in your html that would get the highest priority.