28

次の HTML コードがあります。

<ul>
    <li>number 1</li>
    <li>number 2</li>
    <li>number 3</li>
    <li>number 4</li>
    <li>number 5</li>
    <li>number 6</li>
    <li>number 7</li>
    <li>number 8</li>
    <li>number 9</li>
    <li>number 10</li>
</ul>

たとえば、 CSS3 疑似クラスを使用してli、最初または最後ではない要素に of を持たせるbackground-colorにはどうすればよいtomatoですか? :notセレクターが使えるようです。

4

3 に答える 3

60

ふたつのやり方 ：

:first-child一般的なルールを設定してから、アイテムに対してそれをオーバーライドできます:last-child。これは CSS の強みを発揮します。

 li { background: red; }
 li:first-child, li:last-child { background: white; }

:notまたは、この 2 つを組み合わせたキーワード combined を使用できます。

li { background: white; }
li:not(:first-child):not(:last-child) { background: red; }

2 つのうち、私は個人的には前者を好みます。(私の意見では) 理解しやすく維持しやすいからです。

于 2013-05-30T07:59:36.470 に答える
13

ここにペンがあり ます http://codepen.io/vendruscolo/pen/AeHtG

:not()2 つの疑似クラスを組み合わせる必要があります。

li:not(:first-child):not(:last-child) {
  background: red;
}

MDN のドキュメントは次のとおりです。そこに記載されているように、IE < 9 ではサポートされていませんが、他のブラウザーでは十分にサポートされています。

IE 8 のサポートが必要な場合は、Javascript に依存するか、別のクラスを使用して、どの要素が最後の子であるかを示す必要があります。実際、IE 8 (およびそれ以前) は:last-child疑似クラスをサポートしていません。

于 2013-05-30T07:57:07.300 に答える
0

これは私のために働く

.candidate_verified_items ul li:not(:last-child),
.candidate_verified_items ul li:first-child:not(:last-child) {
   border-right: 1px dashed #7b8db9;
}
于 2020-10-21T04:12:56.080 に答える