顏色必須覆蓋文本並指向列表「LI」CSS

-2

enter image description here我有列表，我該如何在CSS中使用顏色來做LI？顏色必須覆蓋文本並指向列表中......就像表格中的一條線一樣。顏色必須覆蓋文本並指向列表「LI」CSS

[<b>LIST</b> 
<ol> 
    <li>item</li> 
    <li>item 
    <ul> 
     <li><span>sub-item</span></li> 
     <li><span>sub-item</span></li> 
     <li><span>sub-item</span></li> 

    </ul> 
    </li> 
    <li><span>item</span></li> 
</ol>][1]

來源

2016-11-07 Vova

你的問題是不明確的。「在CSS顏色做LI」？ ...「包含文本並指向列表中」？ - 你在談論哪一點 –

非常感謝......是的，我錯了。 – Vova

你有答案嗎？我沒有看到任何被接受的答案 –

你所尋找的是list-style-position:inside;

您需要與顏色屬性類似這樣的添加元素或類選擇：

ul { 
 
    list-style-type: disc; 
 
} 
 

 
li { 
 
    color: #8c200f; 
 
    background-color: #ffc1b7; 
 
    list-style-position:inside; 
 
    padding: 5px; 
 
} 
 

 
.classSelector { 
 
    color: #1d5cc1; 
 
    background-color: #d3e4ff; 
 
    border: 1px solid #8c8c8c; 
 
}

<b>LIST</b> 
 
<ol> 
 
    <li>item</li> 
 
    <li>item 
 
    <ul> 
 
     <!-- Element selector is modifiying all <li> items //--> 
 
     <li>sub-item</li> 
 
     <li>sub-item</li> 
 
     <!-- Class selector is modifying the line below//--> 
 
     <li class="classSelector">sub-item</li> 
 
    </ul> 
 
    </li> 
 
    <li>item</li> 
 
</ol>

來源

2016-11-07 15:20:50

謝謝。這幾乎是我想要的，但我也需要覆蓋顏色和圓圈。 – Vova

你能解釋一下自己好一點嗎@Vova？「蓋奧爾和圓也」是什麼意思？ –

@Vova我修改了代碼片段，現在你可以看到ul元素中的list-style-type是一個圓，是你想要的嗎？ –

這可能是一種可能的解決方案：

.first { 
 
    color: red; 
 
    list-style-position: inside; 
 
} 
 
.second { 
 
    color: yellow; 
 
    list-style-position: inside; 
 
}

<b>LIST</b> 
 
<ol> 
 
    <li class="first">item</li> 
 
    <li class="first">item 
 
    <ul> 
 
     <li class="second"><span>sub-item</span> 
 
     </li> 
 
     <li class="second"><span>sub-item</span> 
 
     </li> 
 
     <li class="second"><span>sub-item</span> 
 
     </li> 
 

 
    </ul> 
 
    </li> 
 
    <li class="first"><span>item</span> 
 
    </li> 
 
</ol>

來源

2016-11-07 15:25:27 reshad

謝謝你的回答，但我選擇了另一個。 – Vova

要將紅色到第一級列表和黑色的色彩進行第二級列表。你可以試試：

li { 
 
    color: red; 
 
} 
 

 
li ul>li { 
 
    color: black; 
 
}

<b>LIST</b> 
 
<ol> 
 
    <li>item</li> 
 
    <li>item 
 
    <ul> 
 
     <li><span>sub-item</span></li> 
 
     <li><span>sub-item</span></li> 
 
     <li><span>sub-item</span></li> 
 

 
    </ul> 
 
    </li> 
 
    <li><span>item</span></li> 
 
</ol>

來源

2016-11-07 15:29:11

謝謝你的回答，但我選擇了另一個。 – Vova

我知道你想這一點：

li { 
 
    text-decoration: line-through; 
 
    text-decoration: line-through solid red; 
 
}

<b>LIST</b> 
 
<ol> 
 
    <li>item</li> 
 
    <li>item 
 
    <ul> 
 
     <li><span>sub-item</span></li> 
 
     <li><span>sub-item</span></li> 
 
     <li><span>sub-item</span></li> 
 
    </ul> 
 
    </li> 
 
    <li><span>item</span></li> 
 
</ol>

來源

2016-11-07 15:30:42

謝謝你的回答，但我選擇了另一個。 – Vova

顏色必須覆蓋文本並指向列表「LI」CSS

回答

相關問題