1

リスト要素の間に線を表示する必要があるリスト項目がいくつかありますが、最初と最後の要素には表示されません。

ここSOに関する多くの投稿によると、これは次を使用して実行できます

最初のアプローチ

.list-item { 
    border-top: 1px solid black;
}

.list-item:first-child{
    border: none;
}

でも、こんな風にもできるって自分で気づいた

2番目のアプローチ

.list-item ~ .list-item {
    border-top: 1px solid black;
}

私は自分のオフィス プロジェクトで 2 番目のアプローチを実装していましたが、同僚が使用を禁止しました。

シンプルで同じことを行い、ブラウザの互換性も通過するので、私はそれを使用していました。では、なぜ2番目のアプローチを使用すべきではないのでしょうか? （SOでこのアプローチが見つからないため、ここで質問しています）

私の同僚は、プロジェクトの後半でバグが発生すると述べています。それで、私の質問は、CSS の「兄弟セレクター」に関連する問題は本当にありますか?

4

5 に答える 5

1

他の回答のように大規模で詳細になることはありません。実際にこれを詳しく説明する必要はないと感じています...

tl;dr

ここでは IE9+ をサポートしています。どのようなアプローチを採用すべきかについて意見をいただけますか? (上記の 2 つのアプローチ) (ここ)

答えは、どちらも完全に互換性があるため、使用しても使用しても問題はありません..~first-child

ここで唯一の問題は、 this~のような内部に他のプロパティがある場合、問題が発生する可能性があることです。first-child

私の同僚は、プロジェクトの後半でバグが発生すると述べています。- まず、一般的な兄弟セレクターで実際にどのようなバグが発生するかをお問い合わせください。

それで、私の質問は、CSS の「兄弟セレクター」に関連する問題は本当にありますか? - 答えはノーです

互換性に関する限り、以下の表を参照してください。

ここに画像の説明を入力

したがって、互換性テーブルを既に共有しました。一般的な兄弟セレクターを使用しても、同僚がそれを使用するのに冗長である場合でも、まったく問題ありません~..いくつかの代替ソリューションを提供します..

解決策 1 - ヴィンテージ

要素classの最初の子での使用li

ul li {
    border-top: 1px solid #eee;
}

ul li.first {
    border-top: 0;
}

デモ

解決策 2 - [1]first-childを使用(既にお持ちです)

ul li {

    border-top: 1px solid #eee;
}

ul li:first-child {
    border-top: 0;
}

デモ 2

1.互換性

first-of-type最後になりましたが、代わりに使用することもできますが、ここfirst-childでfirst-childは互換性が問題になります.またはに行く場合は使用する必要がありますfirst-of-typelast-of-typelast-childborder-topborder-bottom: 0;last-childlast-of-type

于 2013-11-18T11:43:57.290 に答える
1

これが「バグ」の意味かもしれません

考えられる「バグ」について議論する前に、nmkol の回答に同意しないことに注意して:first-childください。あなたの場合はまったく問題ありません。潜在的な問題を示す彼の例ulは無効なhtmlliですli.

次に「バグ」について。

初め

最初のコードは、必要に応じて行を提供し、後の css (おそらく同僚によって作成されたプロジェクト内の他の css)が次のようにオーバーライドできるようにします。

.list-item {
   border: none;
}

ただし、2 番目のコードを使用する場合、上記のオーバーライドは機能しません。これは、オーバーライドが元のセレクター コードの特異性を克服するほど具体的ではないためです。したがって、これは「バグ」として認識される可能性があります。これは、それをオーバーライドするために特異性を高める何らかの方法が必要になるためです。「エレガントな」方法はなく、このような:nth-child(n)「冗長な」増加によってのみ可能です。 (すべての要素に一致するため冗長):

.list-item:nth-child(n) {
    border: none;
}

または、この冗長性(クラスを 2 回記述するだけです):

.list-item.list-item {
    border: none;
}

ただし、特異性を高める方法は他にもありますが、それは冗長ではないかもしれませんが、同僚が特異性を高めることを望んでいない可能性があります。

2番

どちらのバージョンも、古いブラウザーでは「バグ」がありますが、違いがあります。:first-childしたがって、同僚が疑似クラスを一般的な兄弟セレクター~よりもバグが少ないと見なす可能性があるのは、必要なブラウザーのサポートに依存する場合があります。

個人的には、2 番目のコードでどのような「バグ」が発生するかについて、より具体的に説明してほしいと思います。これは、彼らが問題を認識しているものをより明確に確立するのに役立ちます (これは、ここでは説明していない「第 3 の」考えかもしれません)。

まだ良いですか？

意図したサポートは IE9+ であるため、このセレクターがおそらく最適なソリューションです。

.list-item:not(:first-child) { 
    border-top: 1px solid black;
}

私が「最高」と言ったのは、次の理由による。

  1. 単一の（非カスケード）セレクターとして保持します
  2. 問題のアイテムのみを評価するセレクターとしてそれを保持します (つまり、ブラウザーは、以前の要素のステータスをチェックする必要がありません。これは、の一般的な兄弟コンビネーターの場合です.list-item ~ .list-item)。したがって、パフォーマンスが向上します。
  3. 何が行われているのか、つまり、.list-itemそれが最初のものでない限り を選択することが少し明確になります。.list-item ~ .list-item最初の項目をスキップし、最初の項目だけをスキップすることもすぐにはわかりません(ただし、考えてみると、その結論に達するでしょう)。

これらがli要素 (たとえば、要素の「リスト」div) で使用されていない場合、:first-childを置き換える必要がある可能性があります:first-of-type(これは、他の非「リスト項目」要素が同じタイプではないことを前提としています) ; 実際、このアイデアはli要素で使用するために設計されています)。

于 2013-11-16T15:32:41.143 に答える
1

他の2つの回答ですでに述べたように、なぜあなたのアプローチが「バグ」であるべきなのかわかりません。しかし、あなたの一般的な概念には他にもいくつかの問題があります。

マークアップは次のようになっていると思います。 

<ul>
   <li class="list-item">...</li>
   <li class="list-item">...</li>
   <li class="list-item">...</li>
   <li class="list-item">...</li>
</ul>

順序付きリストか順序なしリストかは関係ありません。

したがって、アプローチに関する最初のポイントは、クラス属性の使用です。リスト項目が 3 つまたは 4 つしかない場合は問題にならないかもしれませんが、要素が 100 個以上ある場合、これがどれほど効果的でないかを考えてみてください。

したがって、すべてのリスト項目でクラス属性を使用することは、通常、親要素で使用するよりも避けるべきです。 

<ul class="my-list">
   <li>...</li>
   <li>...</li>
   <li>...</li>
   <li>...</li>
</ul>

第 2 に、クラス名と ID 名は、表示が変更される可能性があるため、表示ではなく、常にそれぞれの要素の内容に関連している必要があります。
(したがって、「my-list」は適切な選択ではなく、コンテンツに関連する名前に置き換える必要があります。または、クラス属性の代わりに ID を使用する方がよい場合もあります。)

あなたも書いた：

...しかし、最初と最後の要素ではありません。

li最初の要素と両方の要素のみを一致させるため、最初の要素でも2番目のアプローチでも、アプローチでこれをどのように達成するかわかりません。

最初の要素に一致しない別の解決策があります (必要なブラウザのサポートに応じて) :

.my-list li:not(:first-child) {
   border-top: 1px solid black;
}

そして、最後の要素も除外したい場合:

.my-list li:not(:first-child):not(:last-child) {
   border-top: 1px solid black;
}

ネストされたリストの場合は、次のように子セレクターを使用できます。

.my-list > li:not(:first-child):not(:last-child) {
   border-top: 1px solid black;
}

いつものように、CSS で同じことを達成する方法はたくさんあります。どちらが最適かは、それぞれのプロジェクトの個々の状況によって異なります。一般に、KISS の原則を念頭に置いておくことは悪い考えではありません。;-)

于 2013-11-17T22:31:04.347 に答える
1

1）IE9 +をターゲットにしていると述べたので、両方のアプローチがサポートされているため、ブラウザのサポートはここでは関係ありません。

2）アプローチ＃2は、1つのルールで最初の要素を除くすべての上境界線を配置することに成功し、境界線をオーバーライドしないという点でより簡潔に見えますが-

i) これらの状況でルールをオーバーライドすることは、コードが何をしているかを明確に示しているため、より良い考えのようです。

と

ii) リスト項目にボーダートップ以外のスタイルが必要な場合 (これは非常によくあるケースです) - とにかく、すべてのリスト項目のスタイルをターゲットにするために、方法 2 で追加のルールが必要になります。

したがって、アプローチ 2 よりもコードの明快さのわずかな利点のために、アプローチ 1 に固執します。

于 2013-11-18T11:09:29.943 に答える