css 3擬似クラスセレクタクイック復習
前言
cssがフロントエンド開発の基本となると、「セレクタ」が基礎の基礎となる.もしあなたがこれらの混同されやすいセレクタを複写したり勉強したりしたら、あなたは場所に来ました.私の古い仲間です.
この記事では、それらの特性を直接比較し、迅速に把握することができます.
first-child & last-child
この2つのセレクタは、兄弟要素のセットの1つ目と一致します.
注意:このセレクタを機能させるには、実際には3つの条件を満たす必要があります.
p last-childは、ここでは特に述べるが、区別は、後から前へマッチングすることである.first-of-type & last-of-type
この2つのセレクタは、エレメントの位置が本当にそのエレメントの最初(最後)であるかどうかを無視して、同じグループタイプの最初(最後)と一致します.
注:セレクタを機能させるには、実際には2つの条件を満たす必要があります.
p last-of-typeは、ここでは特に述べるが、区別は、後から前へマッチングすることである.only-child & only-of-type
only-childは兄弟要素のない要素に一致し、言い換えれば「孤児」要素に一致します.上の図の「孤立」された要素には、第1の
only-of-typeは、兄弟要素の中のタイプの唯一の要素のセットに一致します.1番目の
nth-child & nth-last-child
これらの擬似セレクタの最も興味深い点は、1つの式
an+bに伝達することができ、この式に基づいて要素をマッチングすることである.この公式には多くの遊び方があり、この公式のすべての組み合わせと一致する内容を暗記する人が多い.実際に私たちの考え方はcssに固化されています.これは数学の観点から法則を明らかにしやすいからです.例えば、次のようなコードがあります.
思考パターン:
結果:
数式
説明する
2n
すべての偶数要素
2n+1
すべての奇数要素
n & n+1
すべての要素
n+2
2番目の要素の後の要素(2番目の要素を含む)
n+3
3番目の要素の後の要素(3番目の要素を含む)
0n
何もマッチしない
3n+4
4,7,10,13 ....
1
最初の要素のみ一致
-n+2
最初の2つの要素のみが一致します
nth-child(odd)
きすうげんそ
nth-child(even)
偶数要素
この例では、
nth-childのいくつかの一般的な一致規則が示されており、いずれのコンテンツにも一致しない0nを含む.nth-childはスタイルの適用上特殊である、以下の例ではdivが非p要素としてp:nth-childに一致しない.したがって、divはp元素の連続性を破る、div後のp元素は に再マッチングすべきであるのが一般的であるが、div後のpがマッチングされているわけではない.要素の名称の違いを無視すると、
を含むpのラベルは確かに2の倍数である.つまり、nth-childは隣接する兄弟要素をすべて統計してセレクタを無視し、スタイルを適用する際にセレクタを用いてフィルタリングする.上の図の
.
nth-last-childであれば、 から へのバージョンであることに しなければならない.ここでは、 な を げません.
MDNには、 の に じて のスタイルを できる い も されています.
li:nth-last-child(n+3),
li:nth-last-child(n+3) ~ li {
color: red;
}
A list of four items (styled):
- One
- Two
- Three
- Four
A list of two items (unstyled):
- One
- Two
nth-of-type & nth-last-of-type
nth-of-type : じグループの じタイプの する の に する nth-of-typeとnth-childは し いますが、 が すると、 ではなく する にスタイルが されます.nth-last-of-typeは から へのバージョンですが、ここでは しく しません.