3

私はいくつかのスパンを持っており、列挙を形成しています：

<span class="item">Value 1</span><span class="delim">, </span>
<span class="item">Value 2</span><span class="delim">, </span>
<span class="item">Value 3</span>

すべてにitemが含まれていれば問題ありませんが、2番目のスパンにdisplay:inlineクラスを追加すると、結果は次のようになります。display:noneitem

値1、、値2

CSS内でこの問題の解決策を見つけることができず、JSを使用することは望ましくありません（可視性を切り替えるコードはすでに非常に複雑です）。

何か案は？

アップデート。現時点では、提案されているすべてのソリューションはitem、2番目のスパンだけでなく、任意のスパンを非表示または表示できるという事実を見逃しています。問題は、中央の二重コンマだけでなく、最後の余分なコンマでもあります。

4

4 に答える 4

4

CSSだけのシンプルなソリューション:

.item:before{
    content: ", ";
}
.item:first-child:before{
    content: "";
}

http://jsfiddle.net/8aEhz/

于 2012-05-25T09:05:09.520 に答える
1

これは、値を持つスパンが区切られたスパンの親ではないためです。値のスパンを非表示にするときに区切り文字を非表示にするには、次のように、値のスパン内に区切り文字を含める必要があります。

<span class="item">Value 1<span class="delim">, </span></span>
<span class="item">Value 2<span class="delim">, </span></span>
<span class="item">Value 3</span>
于 2012-05-25T08:57:25.717 に答える
1

解決策は、いわゆる一般的な兄弟セレクターを使用することです。

.item.active ~ .item.active:before {
    content: ', ';
}

カンマは、親が別の可視アイテムを子として持つ可視アイテムの前にのみ挿入され、その子はドキュメント内で私たちの前に置かれます。

于 2012-05-25T13:54:03.217 に答える
1

これはあなたが求めているものですか？

http://jsfiddle.net/wQxW/

.hidden {
    display: none;
}

.hidden + .delim {
    display: none;
}

それは与えます

値 1、値 3

これは、兄弟セレクターの良い紹介のようです: http://css-tricks.com/child-and-sibling-selectors/。おそらくそれらを理解する必要があります-それらは非常に強力です。

于 2012-05-25T08:59:07.857 に答える