freeCodeCamp/guide/chinese/css/css3-nth-child-selector/index.md

1.7 KiB
Raw Blame History

title localeTitle
CSS3 Nth Child Selector CSS3 第`nth-child`选择器

CSS3 第nth-child选择器

nth-child选择器是一个css伪类它采用一种模式来匹配一个或多个元素相对于它们在兄弟姐妹中的位置。

句法

   anth-childpattern{
     /* Css到这里 */
   }

模式

nth-child所接受的模式可以是关键字或An+B的方程

关键字

Odd

Odd会返回所属于特定类型的HTML元素当中的奇数元素。 在下面的示例中,所奇数的a元素将会被指定而选择器中的CSS会被插入被指定的元素中。

    anth-childodd{ 
      /* CSS在这里 */
    }

Even

Even会返回所属于特定类型的HTML元素当中的偶数元素。 在下面的示例中,所位于偶数的a元素将会被指定而选择器中的CSS会被插入被指定的元素中。

    anth-childeven{
        /* CSS在这里 */
    }

An+B

An+B会返回所有属于特定类型的HTML元素中符合An+B(n与每个正整数)的元素 在下面的示例中,每隔三个a元素的元素将会被指定而选择器中的CSS会被插入被指定的元素中。

    a:nth-child3n{
      /* CSS在这里 */
      } 

更多信息:

MDN文档 CSS技巧 - 第n个子选择器 CSS技巧 - 第n个儿童测试员 W3Scools - 第n个儿童选择器