CSS選擇器，只有文本作爲孩子的元素

我想要一個CSS選擇器，只會給我下面的第一個3 <li> s沒有DOM兒童。 :empty不起作用，因爲它的文本被視爲兒童。CSS選擇器，只有文本作爲孩子的元素

<ul> 
    <li>I want this one</li> 
    <li>I want this one</li> 
    <li>I want this one</li> 
    <li><a href="...">Not this one</a></li> 
    <li><a href="...">Not this one</a></li> 
</ul>

來源

2017-03-09 stackjlei

參見http://stackoverflow.com/questions/1014861/is-there-a-css-parent -selector –

你不能這樣做，作爲一般規則，因爲只要你想只針對文本則需要家長選擇，但...

...，你可以使用:empty選擇器結合的屬性和僞元件

ul li:empty::after { 
 
    content: attr(data-text); 
 
    color: red; 
 
    background: lightgray; 
 
}

<ul> 
 
    <li data-text="I want this one"></li> 
 
    <li data-text="I want this one"></li> 
 
    <li data-text="I want this one"></li> 
 
    <li><a href="...">Not this one</a></li> 
 
    <li><a href="...">Not this one</a></li> 
 
</ul>

來源

2017-03-09 23:14:02 LGSon

CSS選擇器，只有文本作爲孩子的元素

回答

相關問題