順不同のリストの最初の2つのリスト項目を選択したいと思います。私は、このように最初の項目を選択することができます。nth-child（）またはfirst-child？ 1つ目の子と2番目の子を選択する方法
ul li:nth-child(1) a {
background: none repeat scroll 0 0 beige;
}
OR
ul li:first-child a {
background: none repeat scroll 0 0 beige;
}
を私が第一及び第二の行項目の両方を選択したい - 私はそれをどのように行うのですか？
:nth-childを使用しない
ul li:first-child, ul li:first-child + li {
list-style: none;
}
Here IE7
これはIE9 +で動作しますが、これは最短ではありません。 @ BoltClockのセレクタは、IE9 +の最短のソリューションです。私はこれを少しだけ理解しやすいと思うので、私はそれを別のものとして残しておきます。
ありがとうございます。だから私はコンマで各セレクタを区切る必要があります - 同じセレクタで両方を選択する方法はありませんか？私はul liの線に沿って何かを考えていました：第n児（1,2） - もちろんそれはうまくいきませんでしたが、私はそこに何か似ていると思っていましたか？ –
@tvanfosson： 'an + b'を使うと、負の' a'を渡すだけで、最初の 'b'子のみを拾うことができます。私の答えを見てください。 – BoltClock
@BoltClock - 私は毎日何か新しいことを学びます。あなたに+1してください。しかし、私はここで私のことを考えています。 – tvanfosson
ブラウザ間の互換性のための最良の方法は、jQueryを使用してクラスをリスト項目に割り当てることです。第一及び第二の子供を選択するための
のような何か...
$(function() {
$('li').each(function() {
if($(this).index() == 1 || $(this).index() == 2) {
$(this).addClass('first_or_second');
}
});
});
javascriptのないブラウザ？ –
、あなたはそうのような単一:nth-child()擬似クラスを使用することができます。
ul li:nth-child(-n+2) a {
background: none repeat scroll 0 0 beige;
}
ニース。私は 'a = -1'を使うことについて知らなかった。 – tvanfosson
.trJobStatus ul{
width: 500px;
height:500px;
float: left;
}
.trJobStatus ul li{
width: 50px;
height:50px;
border: solid 1px #ddd;
list-style:none;
display: inline-block;
text-align: center;
line-height:50px;
font-size:25px;
}
.trJobStatus ul li:nth-child(1),
.trJobStatus ul li:nth-child(5){
color:red;
}
<div class="trJobStatus">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>.trJobStatus ULでテストデモですli：nth-child（1）、 .trJobStatus ul li：nth-child（2）{ color：#fff; 背景色：#ddd; }
+1： 'first-child'と隣接する兄弟セレクタは、IE7までの互換性のために最適です。 – BoltClock