Geek asks and answers

Can CSS font style propagation be prevented?

I have a plugin that displays a profile section, and I plan to wrap it with ol> li. I want the list number style using a different font size / style / color. But if I do, the font style will spread / cascade into the profile. I do not want to redo every text inside the profile again. So is it possible to prevent the font style from spreading to stream 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'm exaggerating "repeating each text." I think that if I need to change the profile style again, I will need to know the default font styles outside ul and apply them in the div. It is not so much, but in the future two places need to be changed in order to maintain a common style.

+3
source share
3

"reset" . , . , , , , , .

: http://jsfiddle.net/79ZK5/1/

+2

, . ( "C" CSS) , . reset , .

, , , <li>, . , , :):

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;
}
+4

As I understand it, this is due to the priority of the selector, which can be used to override the style. Look here to understand Style Priority . If you specify a style in your html that will get the highest priority.

+1
source

More articles:


All Articles