在CSS中，如何檢索二級父項的顏色？

Question

我有這樣的HTML代碼：

some text, blablabla 
<ul> 
    <li>hello</li> 
    <li>hola</li> 
</ul 

，我需要顏色列表中的圓點在藍色大一號的，但我也需要在列表的文本留下來，因爲它是（相同的字體，顏色和大小爲「一些文字，blablabla」）。

所以我試圖用span標籤這樣，

some text, blablabla 
<ul> 
<li style="color: #00B0F0;font-size: 200%;"><span style="font-size: 100%;color:default;">hello</span></li> 
<li style="color: #00B0F0;font-size: 200%;"><span style="font-size: 100%;color:default;">hola</span></li> 
</ul> 

但是，它不工作，即在列表中的文本顏色爲點（藍色）相同。

因此，我必須找到一種方法將列表前面的文本顏色應用於列表文本（已知我不知道要應用的文本屬性，我只是應用了特定字體）。 有什麼想法？

感謝

Answer 1

您可以使用color:initial & font-size: 50%跨度標籤..檢查以下片斷

some text, blablabla 
 
<ul> 
 
    <li style="color: #00B0F0;font-size: 200%;"><span style="font-size: 50%; color: initial;">hello</span></li> 
 
    <li style="color: #00B0F0;font-size: 200%;"><span style="font-size: 50%; color: initial;">hola</span></li> 
 
</ul>

**，或者你可以做到這一點使用CSS content prope RTY **

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
li { 
 
    padding-left: 1em; 
 
    position: relative; 
 
} 
 

 
li::before { 
 
    content: "• "; 
 
    color: red; 
 
    font-size: 32px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 50%; 
 
    margin-top: -16px; 
 
}

<ul> 
 
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li> 
 
    <li>hola</li> 
 
    <li>hola</li> 
 
    <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</li> 
 
</ul>

Answer 2

這裏你可以看到一個例子：https://www.w3.org/Style/Examples/007/color-bullets.en.html

李:: {之前的內容： 「•」;顏色：紅}

Answer 3

你可以使用CSS content和顯示子彈列表，按您的requirement.Like這樣的：

ul { 
 
    list-style: none; 
 
} 
 

 
ul li:before { 
 
    content: "•"; 
 
    font-size: 30px; 
 
    color: blue; 
 
    padding-right: 5px; 
 
}

<ul> 
 
    <li>item 1</li> 
 
    <li>item 2</li> 
 
</ul>