80

なぜこれが機能しないのですか？http://jsfiddle.net/84C5W/1/

p{
    display: none;
}
p.visible:last-of-type {
    display: block;
}
<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

実際、私の<p>要素はどれも表示されていません。セレクターでへの参照を削除すると、これはdiv.visibleの最後を表示しますが、これは私が望むものではありません。<p>

もちろん.visible、常に1つしか保持できませんでしたが、これはreveal.jsプレゼンテーション用であり、JavaScriptを制御することはできません。

クラスでdiv内の最後の要素を選択するにはどうすればよい.visibleですか？これにはJavaScriptを使用したくありません。

4

5 に答える 5

136

あなたの問題は、それがセレクター:last-of-typeとして機能することを読んで考えていることですが、代わりにそれは特に要素のみを意味します。残念ながら、クラスの最後のインスタンスのセレクターはありません。:last-of-class

W3Cから:

:last-of-type疑似クラスは、その型の最後の兄弟である要素を表します。

セレクターとして次のことp.visible:last-of-typeを行います。

  1. :last-of-typeHTML の各包含要素内の要素の各リスト (たとえば、1 つ以上の要素。兄弟のない子がまだ適用されている可能性があります) を調べます。
  2. そのリストの最後の要素を見つけます
  3. <p>要素かどうかを調べる
  4. クラスがあるかどうかを確認します.visible。

要するに、セレクターはそのスタイルを、そのクラス<p> も持つ.visibleにのみ適用します。マークアップでは、最初の 2 つの<p>要素だけがそのクラスを持ちます。3番目はそうではありません。

説明するさまざまなスタイルのデモを次に示します。

p:last-of-type {
  /* this will be applied in the third paragraph because the pseudo-selector checks for nodes only */
  color: green;
}
p.visible:last-of-type {
  /* this does not get applied, because you are using the pseudo-selector with a specific class in addition to the node type. */
  color: red;
}
<p class="visible">First paragraph.</p>
<p class="visible">Second paragraph.</p>
<p>Third paragraph.</p>

あなたの究極の目標として、

クラス .visible を使用して div 内の最後の要素を選択するにはどうすればよいですか? これには JavaScript を使用したくありません。

最も簡単でパフォーマンスの高い方法は、スタイルを適用しようとしている方法を逆にすることです。3 つの div のうち 2 つを非表示にしようとする代わりに、非表示にする div の 1 つにはクラスがあり、非表示にする div にはクラスがなく、表示する div は非表示にする 1 つの div と同じクラスを共有しますこれにもクラスがあります（かなり紛らわしいですね）、次の手順を実行します。

  • より小さい要素 (または要素のグループ) にのみクラスを追加します。
  • 要素のデフォルト スタイルを、クラスで達成したくないものに設定します。
  • クラスのスタイルを、達成したいものに設定します。

p {
    display: none;
}
.visible {
    display: block;
}
<div>
    <p>This should be hidden</p>
    <p class="visible">This should be displayed</p>
    <p>This should be hidden</p>
</div>

このデモからわかるように、HTML と CSS が単純になるだけでなく、*-of-type疑似セレクターではなくクラス セレクターのみを使用する利点もあり、ページの読み込みが速くなります (詳細は以下を参照)。 .

後続または親セレ​​クターがないのはなぜですか? これにより、ページ上で動的にクラス名を 1 つ変更するだけで、多くの Web ページの速度が低下する可能性があります。

2008 年に WebKit の実装に取り​​組んでいた Dave Hyatt は、これらの実装が回避されるいくつかの理由について言及しました。

親セレクターを使用すると、誤ってドキュメント全体をひっくり返すことが非常に簡単になります。人々はこのセレクターを悪用する可能性があり、悪用するでしょう。それをサポートすることは、人々に首を吊るすためのたくさんのロープを与えることです.

CSS3 セレクターに関する悲しい真実は、ページのパフォーマンスが気になる場合は、まったく使用すべきではないということです。マークアップをクラスと ID で装飾し、兄弟、子孫、および子セレクターの使用をすべて回避しながら、それらのみを照合すると、実際には、すべてのブラウザーでページのパフォーマンスが大幅に向上します。

于 2012-11-25T19:37:49.603 に答える
9

問題は、:last-of-type要素セレクターにのみ一致することです。あなたの例では、classセレクターを一致させようとします。それが機能していない理由です。

例：http ：//dabblet.com/gist/4144885

于 2012-11-25T19:32:48.040 に答える
6

今後の参考のために、これは CSS レベル 4 でカバーされます: https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

執筆時点ではブラウザのサポートは存在しません: http://css4-selectors.com/selector/css4/structural-pseudo-class/

これが準備ができたら、これが解決策になるはずです：

p {
  display : none;
}
p.visible:nth-last-match(0) {
  display : block;
}
<div>
  <p class="visible">This should be hidden</p>
  <p class="visible">This should be displayed</p>
  <p class="">This should be hidden</p>
</div>

于 2017-05-31T10:12:21.250 に答える
0

これは、クラス以外の問題を回避する方法でした-残念ながら、これはJavascriptソリューションです。

function lastOfType(className){
            var allElemsOfType = document.getElementsByClassName(className);
            if (!allElemsOfType || !allElemsOfType.length) return null;
            else return allElemsOfType[allElemsOfType.length - 1];
    }

lastOfType('visible').style.display = 'block'
.visible {
  display: none;
}

p {
  display: none;
}
<p class='visible'>1</p>
<p class='visible'>2</p>
<p>3</p>

于 2019-09-10T07:59:38.197 に答える