10

私はいくつかの Wordpress Web ページを仕上げてCSSおり、ページ内のエントリのロールを ( で)スタイル設定したいと考えていPostsます。Wordpress はこれを作成します: 

<div class="entry">

ページにはこれらの要素がたくさんあります。それらを区切るために、エントリの下部に境界線を使用しました。問題は、最後のエントリにこの境界線を付けたくないということです。CSSでそのようなことはできますか？(これはリストではないので、疑似クラスを使用できないことに注意してください)

これが私のCSSです。これは非常に単純です。

.entry{  border-bottom: 1px solid yellow; }

HTML:

<div id="wrapper">
  <br />
  there are loads of code
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  <div class="entry">bunch of code there</div>
  <br />
  another huge code
  <br />
</div>

よろしくお願いします。

4

4 に答える 4

13

探しているものの名​​前は既に指定されていますlast-child: http://reference.sitepoint.com/css/pseudoclass-lastchild

だから使う.entry:not(:last-child) { border-bottom: 1px solid yellow; }

これはリストではないので、疑似クラスを使用できないことに注意してください)

JSYK、疑似クラスは、含まれる要素がリストであることに依存しません。.entry最終要素が実際にはそのコンテナーの最後の子ではないことを意味している場合でも、それを選択できる可能性があります。しかし、実際のマークアップがどのように見えるかを見せてくれなければ、その方法を教えることはできません。

finaldiv.entryの後に他の div が続かない場合は、セレクター.entry:not(:last-of-type)が機能します。

于 2012-10-18T16:47:25.697 に答える
8 
.entry:last-child {
  border-bottom: none;
}

<li>内部にリンクを含むリストがあり、最後の<a>を取得したいとします。使用するだけです：<a><li>

.entry:last-child a {
  border-bottom: none;
}

これにより、最後.entryのリンクが選択され、そのリンクがターゲットになります。

于 2012-10-18T16:51:02.123 に答える
4

非常に簡単な解決策：

#wrapper :last-child
{
    border:none;
}
于 2014-10-15T05:12:30.930 に答える
1

最も包括的なブラウザー サポートについては、これを使用することをお勧めします。

.entry { border-bottom: 1px solid yellow; }
.entry:last-child { border-bottom: 0; }
于 2012-10-18T16:49:13.380 に答える