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选择器，只有文本作为孩子的元素

回答

相关问题