CSS :nth-of-type() ਪਸੀਵਲ ਕਲਾਸ

ਪਰਿਭਾਸ਼ਾ ਅਤੇ ਵਰਤੋਂ

CSS :nth-of-type(n) 伪类用于匹配作为其父元素中同类型（标签名）的第 n 个子元素的每个元素。

n 可以是一个数字/索引、一个关键字（odd 或 even）或一个公式（如 an + b）。

提示：查看 :nth-child() 伪类以选择作为其父元素中第 n 个子元素的元素，无论其类型如何。

实例

例子 1

如何使用 :nth-of-type() 选择器：

/* 选择 div 兄弟元素中的第二个元素 */
div:nth-of-type(2) {
  background: red;
}
/* 选择列表中的第二个 li 元素 */
li:nth-of-type(2) {
  background: lightgreen;
}
/* 选择任何兄弟元素组中的每第三个元素 */
:nth-of-type(3) {
  background: yellow;
}

ਆਪਣੇ ਆਪ ਦੂਸਰੇ ਪ੍ਰਯੋਗ ਕਰੋ

例子 2

odd 和 even 是关键字，可用于匹配索引为奇数或偶数的子元素（第一个子元素的索引为 1）。

在这里，我们为奇数索引和偶数索引的

元素指定不同的背景颜色：

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

ਆਪਣੇ ਆਪ ਦੂਸਰੇ ਪ੍ਰਯੋਗ ਕਰੋ

例子 3

使用公式（an + b）。描述：a 表示整数步长，n 是从 0 开始的所有非负整数，b ਇਹ ਪੂਰਣ ਅਨੁਮਾਨ ਹੈ。

ਇੱਥੇ, ਅਸੀਂ ਜਿਨ੍ਹਾਂ <p> ਐਲੀਮੈਂਟਾਂ ਦੇ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਦੇ ਸਿਫਾਰਸ਼ ਕਰਨ ਦਾ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ 3 ਦੇ ਗੁਣਨਾਤਮਕ ਅਨੁਮਾਨ (ਅਸੀਂ ਤੀਜਾ, ਛੇਵਾਂ, ਨੌਵਾਂ ਆਦਿ ਐਲੀਮੈਂਟਾਂ ਚੁਣੇ ਹਨ) :

p:nth-of-type(3n+0) {
  background: red;
}

ਆਪਣੇ ਆਪ ਦੂਸਰੇ ਪ੍ਰਯੋਗ ਕਰੋ

ਉਦਾਹਰਣ 4

ਇੱਥੇ, ਅਸੀਂ ਜਿਨ੍ਹਾਂ <p> ਐਲੀਮੈਂਟਾਂ ਦੇ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ ਜਿਨ੍ਹਾਂ ਦੇ ਸਿਫਾਰਸ਼ ਕਰਨ ਦਾ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ 3 ਦੇ ਗੁਣਨਾਤਮਕ ਅਨੁਮਾਨ । ਤਦ ਅਸੀਂ 1 ਘਟਾਉਂਦੇ ਹਾਂ (ਅਸੀਂ ਦੂਜਾ, ਪੰਜਵਾਂ, ਅੱਠਵਾਂ ਆਦਿ ਐਲੀਮੈਂਟਾਂ ਚੁਣੇ ਹਨ) :

p:nth-of-type(3n-1) {
  background: red;
}

ਆਪਣੇ ਆਪ ਦੂਸਰੇ ਪ੍ਰਯੋਗ ਕਰੋ

CSS ਗਰੰਥ

:nth-of-type(index | ਊਣੀ | ਜ਼ਿਆਦਾ | an+b) {
  ਸਸ ਐਲੋਕੇਸ਼ਨਜ਼;
}

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਪਸੀਦਾ ਪੂਰੀ ਤਰ੍ਹਾਂ ਦੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਵਾਲੇ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਨੂੰ ਸਿਫਾਰਸ਼ ਕਰਨ ਵਾਲੇ ਸਾਰੇ ਨੰਬਰ ਪੇਜ ਵਿੱਚ ਦਿੱਤੇ ਗਏ ਹਨ。