html - ：first-childと：last-childを同時に

Question

ここで基本的なポイントが欠けていると感じているので、これは非常に簡単かもしれません。

状況：

.singleOrder:first-child {
    border-radius: 5px 0 0 0;
}

.singleOrder:last-child {
    border-radius: 0 5px 0 0;
}

子供が1人だけになるまでは本当にうまく機能します。その場合、2番目の宣言が最初の宣言を上書きし、目的の効果が得られません。

これを解決するための最も短くエレガントな方法は何ですか？

score 21 · Accepted Answer

それを分割します：

.singleOrder:first-child {
    border-top-left-radius: 5px;
}

.singleOrder:last-child {
    border-bottom-left-radius: 5px;
}

または、追加のルールを作成します。

.singleOrder:first-child:last-child {
    border-radius: 5px 5px 0 0;
}

score 5 · Accepted Answer

使用:only-child:

.singleOrder:only-child {
    border-radius: 5px 5px 0 0;
}

更新: Yogu は正しいです。言い忘れました。これはあなたの声明の後に来るはずです。

2 に答える 2