[英]Styling parent <li> and not children CSS
我正在嘗試制作標題,它有自己的 CSS class 粗體。 然而,孩子們也得到了這種風格。 代碼:
<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>
所以我嘗試添加.cat-parent {font-weight: bold;}
然而,所有的孩子也變得粗體了。 如果我嘗試添加:first-of-type
一樣。
1:為什么孩子們會得到這種風格,即使他們沒有 css class "cat-parent" 2:我應該怎么做才能讓它工作?
有幾種方法可以解決這個問題。 您可以通過執行font-weight: normal;
.children
class 添加樣式。 甚至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>
在 CSS 中,子元素獲取父元素的樣式,直到為子元素指定樣式。 例子
.parent{ color: red; }
<div class='parent'> Parent <div class='child'>Hello<div> </div>
要處理這個問題,您必須為孩子指定一個樣式; 請參見下面的示例。
.parent{ color: red; }.child{ color: blue; }
<div class='parent'> Parent <div class='child'> Child </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.