11

Drupal ビューによって生成されるコードがいくつかあります。次のようになります (わかりやすくするために省略しています)。

<div class="group_content">
  <h3>Header Link</h3>
  <div class="row odd">Here's some content</div>
  <h3>Another Header Link</h3>
  <div class="row even">Here's some more content</div>
</div>

<div class="group_content">
  <h3>Header Link 2</h3>
  <div class="row odd">Here's some content 2</div>
</div>

これは CMS によって生成されるため、レンダリングされたコードに対してできることには制限があります。たとえば、h3 要素に偶数/奇数クラスを追加することはできません。

div class=row別の が続くのみを (css で) ターゲットにするにはどうすればよいdiv class=rowですか? グループに複数の行がある場合は、視覚的な区切りとして機能するように、div に下の境界線を追加する必要があります。div class="row odd">Here's some content</div>したがって、私のコード例を使用すると、それに続く別の行があるため、境界線が適用されます。

私はバックエンド開発者なので、CSS は得意ではありません。IE7 をサポートする必要があります。

4

3 に答える 3

11

変更されたロジック

IE7のサポートが必要なため、h3代わりに要素に境界線を配置します。

div.row + h3 {
    border-top: 1px solid black;
}

これは、ほぼすべての最新のブラウザーとIE7で機能します。

フィドル： http： //jsfiddle.net/jonathansampson/BjUf9/1/

セレクターの明示的なサブジェクト

div.row最後を除いてすべてにのみ配置することを主張する場合、それは別の話です。セレクターの件名を移動することについて質問していますが、これは現在は不可能ですが、ブラウザーがレベル4セレクターを実装するときに行われます。

div.row! + div.row {
    /* These styles apply to the first div.row
       $div.row + div.row is another potential 
       syntax */
}

：last-child、IE9 +

それはできないので、すべてのdiv.row要素にスタイルを設定し、境界線を追加してから、その境界線をオーバーライドして、親の最後の要素であるすべての要素のdiv.row:last-child境界線を削除します。div.row

div.row {
    border-bottom: 1px solid #333;
}
div.row:last-child {
    border-bottom: 0px;
}

フィドル： http： //jsfiddle.net/jonathansampson/BjUf9/

残念ながら、これはIE7では機能しないことに注意してください。しかし、最初のソリューションで提示された変更されたロジックは、そこであなたの面倒を見るはずです。

于 2012-06-05T15:19:06.727 に答える
3

ロジックを元に戻して、要素に適用するborder-topことができます.row + .row

.row + .row {
   border-top : 1px #ccc solid;
}

隣接する兄弟セレクター（+）はで正常に動作しますIE7+

于 2012-06-05T15:19:24.013 に答える