【CSS3】-last-of-type selector+nth-last-of-type(n) selector_html/css_WEB-ITnose

last-of-type セレクター

":last-of-type" セレクターは ":first-of-type" セレクターと同じ機能を持ちますが、違いは親要素の下で選択することです。型の最後の子要素。

デモ例

「:last-of-type」セレクターを使用して、コンテナ「div.wrapper」の最後の段落要素の背景をオレンジ色に設定します

(ヒント: この段落は「div」ではありません) .wrapper" ” コンテナの最後の子要素)。

HTML コード:

<div class="wrapper">  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p>  <div>我是第一个Div元素</div>  <div>我是第二个Div元素</div>  <div>我是第三个Div元素</div></div>

CSS コード:

.wrapper > p:last-of-type{  background: orange;}

デモ結果:

nth-last-of-type(n) セレクター

「:n番目-最後 - of-type(n)」セレクターは、「:nth-of-type(n)」セレクターと同じです。親要素で指定された特定の子要素タイプを選択しますが、その開始方向は最後の子要素からです。その使用法は、前のセクションで紹介した「:nth-last-child(n)」セレクターと似ています。

デモ例

「:nth-last-of-type(n)」セレクターを使用して、コンテナー「div.wrapper」内の最後から 3 番目の段落の背景をオレンジ色に設定します。

HTML コード:

<div class="wrapper">  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p>  <p>我是第四个段落</p>  <p>我是第五个段落</p>  <div>我是一个Div元素</div>  <p>我是第六个段落</p>  <p>我是第七个段落</p></div>

CSS コード:

.wrapper > p:nth-last-of-type(3){  background: orange;}

デモ結果: