CSS3逗号分隔列表（nth-of-class）

时间：2016-08-11 03:26:07

标签： html css html5 css3

我有一个生成的HTML代码如下。

经验法则：
1）这个html的结构无法修改，因为它是由框架自行生成的html代码。
2）只有纯css解决方案。

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="inactive"></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>

<div class="wrapper">
<span class="inactive"><span></span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>

我打算实现的目标：
逗号分隔符如下。

This is active class 1.
This is active class 1, this is active class 2.
This is active class 1, this is active class 2, this is active class 3.
This is active class 2, this is active class 3.

但我目前的结果似乎无法得到这个。我正在尝试搜索最后一个css选择器（对我来说，如果这个选择器存在，一切都将被简化）但似乎没有这样的css选择器。但我无法想到css逻辑解决方法。希望有人可以提供帮助。

我的方法，如果存在最后一个css类：

.wrapper span > span::after {
   content: ',';
}

.wrapper span:last-child > span::after {
  content: '.';
}

.wrapper span.active:last-of-class > span::after {
  content:'.';
}

JS Fiddle Link

3 个答案:

答案 0 :(得分：0)

更新：这是一个纯CSS解决方案：

HTML 

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="inactive"></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>

<div class="wrapper">
<span class="inactive"><span></span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>

CSS 

.wrapper:after {content:".";}
.active + .active:before { content:", ";}
.wrapper .inactive {display:none;}

这是my updated CodePen example

您可能需要调整边距/填充。

答案 1 :(得分：0)

切换逻辑

针对奇数和偶数

使用::before代替::after;现在我们只需要在奇数时以及偶数时删除第一个有效的孩子逗号。

  1. 为每个范围添加逗号::before（除非是第一个孩子）
  2. 删除逗号时：
    • 前2个跨度无效且第3个跨度有效（奇数）
    • 第一个范围无效，第二个范围有效（偶数）
  3. 使用::after。
    4. 将最后一个跨度设为句号

    魔法酱

    .wrapper > span:not(:first-child) > span::before {
    content: ', ';
}

.wrapper > span.inactive:first-child + span.inactive + span.active > span::before,
.wrapper > span.inactive:first-child + span.active > span::before {
    content: '';
}

    实施例

    对于此示例，display: flex会删除内联间隙，而white-space: nowrap会阻止它们在到达视口边缘时进行换行。

    .wrapper {
    display: flex;
    white-space: nowrap;
}

.wrapper > span:last-child::after {
    content: '.';
}

.wrapper > span:not(:first-child) > span::before {
    content: ', ';
}

.wrapper > span.inactive:first-child + span.inactive + span.active > span::before,
.wrapper > span.inactive:first-child + span.active > span::before {
    content: '';
}
    <h2>Random examples</h2>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="active"><span>This is active class 4</span></span>
    <span class="active"><span>This is active class 5</span></span>
    <span class="active"><span>This is active class 6</span></span>
    <span class="active"><span>This is active class 8</span></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="active"><span>This is active class 10</span></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="active"><span>This is active class 4</span></span>
    <span class="inactive"></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 8</span></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="inactive"></span>
</div>

<div class="wrapper">
    <span class="inactive"></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 5</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="active"><span>This is active class 10</span></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 3</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 5</span></span>
</div>

<div class="wrapper">
    <span class="inactive"></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 4</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 6</span></span>
    <span class="inactive"></span>
    <span class="active"><span>This is active class 9</span></span>
    <span class="inactive"></span>
</div>


<h2>
Your examples
</h2>
<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="inactive"></span>
    <span class="inactive"></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="inactive"></span>
</div>

<div class="wrapper">
    <span class="active"><span>This is active class 1</span></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="active"><span>This is active class 3</span></span>
</div>


<div class="wrapper">
    <span class="inactive"><!--<span>This Shouldn't be here, right?</span>--></span>
    <span class="active"><span>This is active class 2</span></span>
    <span class="active"><span>This is active class 3</span></span>
</div>

答案 2 :(得分：-1)

使用纯CSS可以使用以下内容：

＆＃13;
＆＃13; 
.wrapper{
  display: flex;
}
.active:not(:nth-child(1) ) > span:before{
  content: ', ';
}
.wrapper:after{
  content: '.';
}
＆＃13; 
<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="inactive"></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="inactive"></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="inactive"></span>
<span class="inactive"></span>
<span class="active"><span>This is active class 3</span></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="inactive"></span>
</div>

<div class="wrapper">
<span class="active"><span>This is active class 1</span></span>
<span class="active"><span>This is active class 2</span></span>
<span class="active"><span>This is active class 3</span></span>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题