如何找到最后/首先不是空的孩子只使用CSS？

比方说，我有这样的：如何找到最后/首先不是空的孩子只使用CSS？

<div> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span></span> 
    <span></span> 
</div>

，并希望逗号添加到每个非空的元素，除了最后一个非空一个（不是最后一个孩子）。所以从“1 2 3”我想要有“1,2,3”。

剔除最后一个孩子是很容易https://jsfiddle.net/1qo1swwx/ 但这最后一个非空...

预先感谢您为您的帮助:)

来源

2016-01-22 Mateusz Antoni Świątkowski

我敢肯定，我发现，每天都要工作时间和每一个可能的情况下，这里的解决方案：https://jsfiddle.net/4ktq3d3u/1 :)

HTML: 
    <div> 
    <span></span><span></span><span></span><span>1</span><span>2</span><span>3</span><span></span><span></span><span></span><span></span><span>4</span><span></span><span>5</span><span></span><span></span><span></span> 
    </div> 

CSS: 

span:not(:first-child):not(:empty)::before {content:', ';} 

span:empty + span:not(:empty)::before 
{ 
content:'' 
} 

span:not(:empty) ~ span:empty + span:not(:empty)::before 
{ 
    content:', ' 
}

来源

2016-01-23 22:38:49

我想你想使用::后，用你的内容为逗号 “”

http://www.w3schools.com/cssref/sel_after.asp

关于你的第二到最后一个子

http://www.w3schools.com/cssref/sel_nth-last-child.asp

然后排除最后一个孩子。

来源

2016-01-22 19:57:47

如果你点击了这是在我的岗位，你将有链接已知我用过::伪类:) 现在它总是第二或第三个孩子。条件是最后一个非空。我们不知道那是哪一个。 –

也许你应该只是把所有的代码放在这个问题 –

如果不使用js或jquery，就不能这样做，因为css无法访问元素的内容。

来源

2016-01-22 20:05:13 Dmitry

如果你点击了我的文章中的链接，你会知道我使用::在伪类之后，所以通过CSS添加内容不是问题... js或jquery xD使用jquery使用js，oh man ... –

我写这个是因为很多人使用jquery而不知道原生js :-) – Dmitry

那不是真的，你可以在没有js的情况下做到这一点，但有限制，但有可能 – zr9

这里有一个稍微不同的方法，但它可能适合你。不要在每个非空元素之后放置逗号，而应将它们放在BEFORE之前。然后，可以在CSS中捕获第一个非空元素以删除前面的逗号。

span::before {content: ', ';} 
span:empty::before {content:'';} 

span:first-child:empty + span:not(:empty)::before {content:'';} 
span:first-child:empty + span:empty + span:not(:empty)::before {content:'';} 
/* and so on, if you want to catch up to n empty elements in the front */

这确实增加了元素之间的空白，所以它看起来像1，2，3，而不是1，2，3，但是，你可以解决，通过改变HTML到跨之间删除空格。或其他创意CSS方法。

https://jsfiddle.net/37L334hj/

来源

2016-01-22 20:23:27 andi

太棒了！非常感谢你:) 我也尝试了这种方法，并得到了这个https：// jsfiddle。net/vfqoyw45/ 您的解决方案非常棒，但如果您在开始时没有任何空白元素，但它不起作用，但如果您在非空之间有空元素，我的工作将无法工作：P Gotta combined these两个解决方案:) –

https://jsfiddle.net/4ktq3d3u/1/ - 检查了这一点，如果你感兴趣:) –

在这里，我们去https://jsfiddle.net/1qo1swwx/12/

div span:not(:empty)::after { 
    content: ', '; 
} 

div span:nth-last-child(1):not(:empty):after{ 
    content: ''; 
} 

div span:nth-last-child(2):not(:empty):after{ 
    content: ''; 
} 

div span:nth-last-child(3):not(:empty):after{ 
    content: ''; 
} 

div span:nth-last-child(4):not(:empty):after{ 
    content: ''; 
}

记住它仅覆盖于我而言最大的结束3空白跨度上月底空元素的量有限，那只有一个限制，如果需要更多的只是更新规则。

来源

2016-01-22 21:26:53 zr9

如何找到最后/首先不是空的孩子只使用CSS？

回答

相关问题