阅读 211

重拾 CSS 伪类选择器 nth-of-type, nth-child

经常性的弄混这个系列的伪类选择器,今天在遇到一个 css 问题之后,决定从文档参考,彻底弄明白它们的含义和使用

下述翻译仅代表作者观点,如果错误,请及时指正

child:父级下的所有子元素

:nth-child

The :nth-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings before it in the document tree, for any positive integer or zero value of n
:nth-child(an+b) 伪类代表:在文档树中,这个元素之前有 an+b-1 个兄弟元素(n的取值为 正整数和零)

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>
复制代码
.parent{
  :nth-child(1) {
    color:#f00;
  }
}
复制代码

:nth-last-child

The :nth-last-child(an+b) pseudo-class notation represents an element that has an+b-1 siblings after it in the document tree, for any positive integer or zero value of n
:nth-last-child(an+b) 伪类代表:在文档树中,这个元素之后有 an+b-1 个兄弟元素(n的取值为 正整数和零)

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>
复制代码
.parent{
  :nth-last-child(2) {
    color:#f00;
  }
}
复制代码

:first-child

Same as :nth-child(1). The :first-child pseudo-class represents an element that is first in a list of siblings
等同于 :nth-child(1) ,代表兄弟元素中的第一个元素

:last-child

Same as :nth-last-child(1). The :last-child pseudo-class represents an element that is last in a list of siblings.
等同于 :nth-last-child(1) ,代表兄弟元素中的最后一个元素

:only-child

The :only-child pseudo-class represents an element that has no siblings. Same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity
:only-child 伪类代表:有且只有一个子元素(独生子),等价于 :first-child:last-child 或 :nth-child(1):nth-last-child(1),但权重较后者低

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>

<div class="parent">
   <p class="child p">only one child</p>
</div>
复制代码
.parent{
  :only-child {
    color:#f00;
  }
}
复制代码

type:父级下的同一类型的所有子元素

:nth-of-type

The :nth-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name before it in the document tree, for any zero or positive integer value of n
:nth-of-type(an+b) 伪类代表:在文档树中,在它之前有 an+b-1 个具有和它相同标签名的兄弟元素 (n的取值为 正整数和零)

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>

复制代码
.parent{
  :nth-of-type(1) {
    color:#f00;
  }
}
复制代码

:nth-last-of-type

The :nth-last-of-type(an+b) pseudo-class notation represents an element that has an+b-1 siblings with the same expanded element name after it in the document tree, for any zero or positive integer value of n
:nth-last-of-type(an+b) 伪类代表:在文档树中,这个元素之后有 an+b-1 个具有和它相同标签名的兄弟元素(n的取值为 正整数和零)

<div class="parent">
   <div class="child d">d1</div>
   <div class="child d">d2</div>
   <p class="child p">p1</p>
   <p class="child p">p2</p>
</div>
复制代码
.parent{
  :nth-last-of-type(1) {
    color:#f00;
  }
}
复制代码

:first-of-type

Same as :nth-of-type(1). The :first-of-type pseudo-class represents an element that is the first sibling of its type.
等同于 :nth-of-type(1) 。代表和它具有相同类型的第一个兄弟元素

:last-of-type

Same as :nth-last-of-type(1). The :last-of-type pseudo-class represents an element that is the last sibling of its type 等同于 :nth-last-of-type(1) 。代表和它具有相同类型的最后一个兄弟元素

:only-of-type

The :only-of-type pseudo-class represents an element that has no siblings with the same expanded element name. Same as :first-of-type:last-of-type or :nth-of-type(1):nth-last-of-type(1), but with a lower specificity.
:only-of-type 伪类代表:有且只有一种和它类型相同的子元素,等价于 :first-of-type:last-of-type 或 :nth-of-type(1):nth-last-of-type(1),但权重较后者低

<div class="parent">
   <div class="child d">d1</div>
  <div class="child d">d2</div>
   <p class="child p">p1</p>
  <p class="child p">p2</p>
</div>

<div class="parent">
   <div class="child d">only one div</div>
   <p class="child p">only one p</p>
</div>
复制代码
.parent{
  :only-of-type{
    color:#f00;
  }
}

复制代码

参考

w3c

www.w3.org/TR/selector…

demo

codepen.io/Yangfan2016…

关注下面的标签,发现更多相似文章
评论