CSS规则未按预期应用

Question

I have the below code. The first 'ul' tag with id 'selected-plays' has 3 child 'li' tags (not descendants). I am trying to apply few CSS rules to these child tags.

My jQuery code adds the class 'horizontal'. Notice that the selector points to only the child tags of the parent element with id #selected-plays

 $(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); }); 

 .horizontal { margin: 10px; float: left; list-style: none; color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <ul id="selected-plays"> <li>Comedies <ul> <li><a href="/asyoulikeit/">As You Like It</a></li> <li>All's Well That Ends Well</li> <li>A Midsummer Night's Dream</li> <li>Twelfth Night</li> </ul> </li> <li>Tragedies <ul> <li><a href="hamlet.pdf">Hamlet</a></li> <li>Macbeth</li> <li>Romeo and Juliet</li> </ul> </li> <li>Histories <ul> <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) <ul> <li>Part I</li> <li>Part II</li> www.it-ebooks.info Chapter 2 [ 29 ] </ul> <li><a href="http://www.shakespeare.co.uk/henryv.htm"> Henry V</a></li> <li>Richard II</li> </ul> </li> </ul> 

The first 3 properties (margin, float, list-style) are applied to the three child 'li' tags as expected but the last property ie, color is applied to all the elements (descendants) within the parent element. Why is this happening?

Answer 1

This is expected behaviour as child elements will automatically inherit the color setting of their parent. If you do not want this behaviour you can set the color of the children in CSS:

#selected-plays li li {
  color: initial;
}

 $(document).ready(function() { $('#selected-plays > li').addClass('horizontal'); }); 

 .horizontal { margin: 10px; float: left; list-style: none; color: red; } #selected-plays li li { color: initial; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <ul id="selected-plays"> <li>Comedies <ul> <li><a href="/asyoulikeit/">As You Like It</a></li> <li>All's Well That Ends Well</li> <li>A Midsummer Night's Dream</li> <li>Twelfth Night</li> </ul> </li> <li>Tragedies <ul> <li><a href="hamlet.pdf">Hamlet</a></li> <li>Macbeth</li> <li>Romeo and Juliet</li> </ul> </li> <li>Histories <ul> <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>) <ul> <li>Part I</li> <li>Part II</li> www.it-ebooks.info Chapter 2 [ 29 ] </ul> <li><a href="http://www.shakespeare.co.uk/henryv.htm"> Henry V</a></li> <li>Richard II</li> </ul> </li> </ul> 

Answer 2

Inherited properties

FROM MDN

When no value for an inherited property has been specified on an element, the element gets the computed value of that property on its parent element. Only the root element of the document gets the initial value given in the property's summary. A typical example of an inherited property is the color property.

You can simply add color:initial style to the child elements to preserve the styles. The selector can be pre-specified in css or can be added via script as well. You can have different selectors based on the structure eg li > * , li > li or li li , etc.

Answer 3

The child <li> tags are inheriting the color value from the parent <li> tags that have the .horizontal class. You can try over-riding the child tag color by adding a style rule such as:

.horizontal li { color: initial; }