HTML/CSSCSS选择器x-child,x-of-type系列摘要

0

CSS选择器x-child,x-of-type系列摘要

伪类 伪元素 阅读:678 时间:2019年11月22日

:nth-child(an+b) 首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。示例:0n+3 或简单的 3...

:nth-child(an+b) 首先找到所有当前元素的兄弟元素,然后按照位置先后顺序从1开始排序,选择的结果为CSS伪类:nth-child括号中表达式(an+b)匹配到的元素集合(n=0,1,2,3...)。示例:

  • 0n+3 或简单的 3 匹配第三个元素。

  • 1n+0 或简单的 n 匹配每个元素。(兼容性提醒:在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的,可根据喜好任选其一来使用。)

  • 2n+0 或简单的 2n 匹配位置为 2、4、6、8...的元素(n=0时,2n+0=0,第0个元素不存在,因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。

  • 2n+1 匹配位置为 1、3、5、7...的元素。你可以使用关键字 odd 来替换此表达式。

  • 3n+4 匹配位置为 4、7、10、13...的元素。

a 和 b 都必须为整数,并且元素的第一个子元素的下标为 1。换言之就是,该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特别注意的是,an 必须写在 b 的前面,不能写成 b+an 的形式。

  • tr:nth-child(2n+1)

  • 表示HTML表格中的奇数行。

  • tr:nth-child(odd)

  • 表示HTML表格中的奇数行。

  • tr:nth-child(2n)

  • 表示HTML表格中的偶数行。

  • tr:nth-child(even)

  • 表示HTML表格中的偶数行。

  • span:nth-child(0n+1)

  • 表示子元素中第一个且为span的元素,与 :first-child 选择器作用相同。

  • span:nth-child(1)

  • 表示父元素中子元素为第一的并且名字为span的标签被选中

  • span:nth-child(-n+3)

  • 匹配前三个子元素中的span元素。


:nth-last-child()从兄弟节点中从后往前匹配处于某些位置的元素

注意: 这个伪类和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数.

nth-last-child伪类接受一个参数, 用来作为一个模式,从后往前匹配元素.


  • tr:nth-last-child(odd) or tr:nth-last-child(2n+1)

  • 表示HTML表的倒数的奇数行:1、3、5等。

  • tr:nth-last-child(even) or tr:nth-last-child(2n)

  • 表示HTML表的倒数的偶数行:2、4、6等。

  • :nth-last-child(7)

  • 表示倒数第7个元素。

  • :nth-last-child(5n)

  • 表示倒数的第5、10、15等元素。

  • :nth-last-child(3n+4)

  • 表示倒数的第4、7、10、13等元素。

  • :nth-last-child(-n+3)

  • 表示一组兄弟节点中的最后三个元素。

  • p:nth-last-child(n) or p:nth-last-child(n+1)

  • 表示一组兄弟节点中的每个<p>元素。这与一个简单的p选择器相同。(由于n从0开始,而最后一个元素从1开始,n和n+1都会选择相同的元素。)

  • p:nth-last-child(1) or p:nth-last-child(0n+1)

  • 表示所有处于兄弟节点中倒数第一位的元素<p>。这与:last-child选择器相同。


:first-child表示在一组兄弟元素中的第一个元素。


:only-child匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点.


:first-of-type表示一组兄弟元素中其类型的第一个元素。


:last-of-type表示了在(它父元素的)子元素列表中,最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素,也包括子元素的最后一个子元素并以此类推。


:nth-last-of-type(an+b) 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值。它基本上和 :nth-of-type 一样,只是它从结尾处反序计数,而不是从开头处。


:nth-of-type()匹配文档树中在其之前具有 an+b-1 个相同兄弟节点的元素,其中 n 为正值或零值。简单点说就是,这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。


:only-of-type 代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。

<main>
  <div>I am `div` #1.</div>
  <p>I am the only `p` among my siblings.</p>
  <div>I am `div` #2.</div>
  <div>I am `div` #3.
    <i>I am the only `i` child.</i>
    <em>I am `em` #1.</em>
    <em>I am `em` #2.</em>
  </div>
</main>
<style>
main :only-of-type {
  color: red;
}
</style>

image.png

转自:https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child


例题,有个列表长度不固定,要求每行4列,并对最后一行添加指定样式

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
  </ul>
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
    </ul>

  <style>
    ul{
      display: flex;
      flex-wrap: wrap;
      padding: 0;
    }
    ul li{
      width: 25%;
      border:1px solid #aaa;
      box-sizing: border-box;
      list-style: none;
    }
    ul li:nth-child(4n+1):nth-last-child(-n+4),
    ul li:nth-child(4n+1):nth-last-child(-n+4)~li{
      background-color: red;
    }
  </style>





发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^