CSS styles 不繼承嵌套列表中的樣式

Question

我希望它不繼承嵌套列表中的程式化項目符號點。 相反，我希望它們是規則的點。 我如何編輯我的 CSS 樣式來消除這個問題？

 .check-list { margin: 0; padding-left: 2.0rem; margin-bottom: 32px; }.check-list li { position: relative; list-style-type: none; padding-left: 2.5rem; margin-bottom: 0.5rem; }.check-list li:before { content: ''; display: block; position: absolute; left: 0; top: -2px; width: 5px; height: 15px; border-width: 0 3px 3px 0; border-style: solid; border-color: #005A77; opacity: 0.7; transform-origin: bottom left; transform: rotate(45deg); }

 <ul class="check-list"> <li>One</li> <li>Two <ul> <li>Two.One</li> <li>Two.Two</li> </ul> </li> </ul>

Answer 1

您可以只使用直接子選擇器。 利用

.check-list > li
{...}
.check-list > li:before
{...}

代替

.check-list li
{...}
.check-list li:before
{...}

並且嵌套列表仍然堅持circle而不是dot /圓盤。 您應該通過在.checklist之前設置樣式來覆蓋它

li {
  list-style-type: disc;
}

 li { list-style-type: disc; }.check-list { margin: 0; padding-left: 2.0rem; margin-bottom: 32px; }.check-list > li { position: relative; list-style-type: none; padding-left: 2.5rem; margin-bottom: 0.5rem; }.check-list > li:before { content: ''; display: block; position: absolute; left: 0; top: -2px; width: 5px; height: 15px; border-width: 0 3px 3px 0; border-style: solid; border-color: #005A77; opacity: 0.7; transform-origin: bottom left; transform: rotate(45deg); }

 <ul class="check-list"> <li>One</li> <li>Two <ul> <li>Two.One</li> <li>Two.Two</li> </ul> </li> </ul>

Answer 2

子組合器應該解決這個問題。

 .check-list { margin: 0; padding-left: 2.0rem; margin-bottom: 32px; }.check-list > li { position: relative; list-style-type: none; padding-left: 2.5rem; margin-bottom: 0.5rem; }.check-list > li:before { content: ''; display: block; position: absolute; left: 0; top: -2px; width: 5px; height: 15px; border-width: 0 3px 3px 0; border-style: solid; border-color: #005A77; opacity: 0.7; transform-origin: bottom left; transform: rotate(45deg); }

 <ul class="check-list"> <li>One</li> <li>Two <ul> <li>Two.One</li> <li>Two.Two</li> </ul> </li> </ul>

Answer 3

只改變這一行： .check-list li:before {到.check-list li:not(ul ul li):before {

而這個 class：

.check-list li ul li {
  list-style-type: circle;
}

 .check-list { margin: 0; padding-left: 2.0rem; margin-bottom: 32px; }.check-list li { position: relative; list-style-type: none; padding-left: 2.5rem; margin-bottom: 0.5rem; }.check-list li ul li { list-style-type: circle; }.check-list li:not(ul ul li):before { content: ''; display: block; position: absolute; left: 0; top: -2px; width: 5px; height: 15px; border-width: 0 3px 3px 0; border-style: solid; border-color: #005A77; opacity: 0.7; transform-origin: bottom left; transform: rotate(45deg); }

 <ul class="check-list"> <li>One</li> <li>Two <ul> <li>Two.One</li> <li>Two.Two</li> </ul> </li> </ul>