造型父母<li>而不是孩子 CSS</li>

Question

I am trying to make the title, that has it's own CSS class bold. However, also the children are getting the style. Code:

   <ul class="product-categories">
    <li class="cat-item cat-parent">
<ul class="children">
    <li class="cat-item">...</li>
    <li class="cat-item">...</li>
    <li class="cat-item">...</li>
</ul>
</li>
    <li class="cat-item">...</li>
    <li class="cat-item">...</li>
    <li class="cat-item">...</li>
    </ul>

So i tried to add .cat-parent {font-weight: bold;} however, all children are getting bold too. Same if i tried adding :first-of-type .

1: Why are the children getting the style, even though they don't have the css class "cat-parent" 2: What should I do to make it work?

Answer 1

There's a couple ways to solve this. You can add styling to the .children class by either doing font-weight: normal; or even font-weight: initial; .

 .cat-parent { font-weight: bold; }.children { font-weight: normal; font-weight: initial; }

 <ul class="product-categories"> <li class="cat-item cat-parent">parent <ul class="children"> <li class="cat-item">...</li> <li class="cat-item">...</li> <li class="cat-item">...</li> </ul> </li> <li class="cat-item">...</li> <li class="cat-item">...</li> <li class="cat-item">...</li> </ul>

Answer 2

In CSS the child element gets the style of the parent element until a styling is specified for the child element. Example

 .parent{ color: red; }

 <div class='parent'> Parent <div class='child'>Hello<div> </div>

To handle this, you must specify a style for the child; see example below.

 .parent{ color: red; }.child{ color: blue; }

 <div class='parent'> Parent <div class='child'> Child </div> </div>