0

メニュー表があります。私は UL/LI を使用しておらず、ネストされた DIV のみを使用しています。メニュー項目間にグラフィック区切りがあります。リストの最初の項目は左パディングを抑制する必要があります。最後の項目は、右側のパディングとグラフィック セパレータを抑制する必要があります。CSSは次のとおりです。

.platformItem {
  float: left;
  padding: 0 12px;
  background: url(/includes/themes/02RWO/images/assets/separator.gif) no-repeat top right;
}
.platformItem .first {
  padding-left: 0 !important;
}
.platformItem .last {
  padding-right: 0 !important;
  background-image: none !important;
}

HTML は次のとおりです。

<div id="platformMenu">  
  <div class="platformItem first"><a href="">All</a></div>
  <div class="platformItem"><a href="">Windows</a></div>
  <div class="platformItem"><a href="">Mac</a></div>
  <div class="platformItem"><a href="">Linux</a></div>
  <div class="platformItem last"><a href="">Web</a></div>
  <div class="Clear"></div>
</div>

修飾子クラスを使用して特定のプロパティを抑制できることを期待していました。これは可能ですか？これを行うより良い方法はありますか？

どうも。

4

2 に答える 2

1

結局、JSは必要ありませんでした。.firstと.lastは、.platformItemのダウンストリームではなく、＃platformMenuのダウンストリームです。（私はこれを見るべきでした。）新しいコード：

#platformMenu .first {
  padding-left: 0 !important;
}
#platformMenu .last {
  padding-right: 0 !important;
  background-image: none !important;
}
于 2009-07-22T22:09:55.953 に答える
1

最新のブラウザーでは、最初の子の疑似セレクターを使用できます。ただし、 last-child は IE7 または IE8ではサポートされていません。jQuery の強化されたセレクターも確認できます。

$(document).ready(function(){

$("div span:last-child")
    .css({color:"red", fontSize:"80%"})
});
于 2009-07-22T19:58:33.457 に答える