使用內聯樣式設計單個列表項目？

我想更改有序列表中單個列表項的顏色，但我不希望列表編號更改樣式。我還需要在一個html文檔中完成此操作 - 不需要單獨的CSS。

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="UTF-8"> 
<title> Test-page </title> 
</head> 

<body> 
<h1> An html-file </h1> 


<ol> 
<li> Item 1 </li> 
<li style="color:blue"> Item 2 </li> 
<li> Item 3 </li> 
</ol> 


</body> 
</html>

我能想到的唯一的事情來解決這個使用內嵌樣式，方法是：

<ol> 
<li> Item 1 </li> 
<li><p style="color:blue"> Item 2 </li> 
<li> Item 3 </li> 
</ol>

但列表中的項目將顯示爲單獨段落。我不想使用font-tag，我想使用HTML5。我希望它儘可能短，在一個文件中，因此內聯樣式。

來源

2013-10-07 hatakeK

使用'span'而不是'p' – Itay

另外，不要忘記關閉你的'span'標籤， p'標記。不可預見的後果可能會出現。 – SombreErmine

尷尬。我發誓我一直在搜索w3schools幾個小時，顯然看錯了地方。謝謝itay。 – hatakeK

你一個li元素上設置任何CSS規則也適用於列表項標記（子彈，數量）。這很不方便，CSS仍然缺乏單獨設置列表標記的方式。

因此，您使用諸如<li><p style="color:blue"> Item 2 </li>之類的方法是您需要使用的解決方法，但是在選擇添加的內部元素時，您需要考慮後果。一個p元素有默認的頂部和底部邊緣，因此使用它，你需要他們在這裏刪除：

<li><p style="color:blue; margin:0"> Item 2 </li>

一個更簡單的方法是使用div代替p，因爲div是一個語義emply塊級容器元素，它不會導致默認渲染的變化，除了其內容在新鮮線上開始並且內容在新鮮線上開始之後，無論如何由於列表標記而發生。所以：

<li><div style="color:blue"> Item 2</div></li>

相反的div，您可以使用span，如果只有行內（短語級）的內容。但div更靈活，因爲它允許內部列表，表格等元素。

來源

2013-10-07 12:40:58

喜歡這個

demo

CSS

ol li span{ 
color:blue; 
}

來源

2013-10-07 12:31:21 falguni

使用span標籤代替p嘗試。並且不要忘記正確關閉標籤：

<ol> 
    <li><span style="color:blue">Item 2</span></li> 
</ol>

一切順利。

來源

2013-10-07 12:31:57

<li><span style="color:blue">Item</span>2</li>

來源

2013-10-07 12:33:13

使用內聯樣式設計單個列表項目？

回答

相關問題