CSS 技巧：nth-​​of-type()

Posted 2023-03-06

【中文标题】CSS 技巧：nth-​​of-type()

【英文标题】：CSS Trick: nth-of-type()

【发布时间】：2014-11-29 01:43:06

【问题描述】：

您好，我正在寻找一些特别的东西，甚至不确定是否可以使用纯 CSS 来完成：

<div-1> 
  <div-x></div-x>
  <div-x></div-x>
  <div-x></div-x>
  <div-x></div-x>
<div-1> 

我想在 scss 中做的是

if <div-x> render count is even
  then only apply &:last-child something;  to div number len(<div-x>)-1
end

EG： 如果渲染的 div-x 为 4，则将伪元素应用于第三个 div-x 否则不

我在下面尝试过，但它适用于所有奇数元素

&:nth-of-type(odd) 
  border-bottom: none;

任何提示/帮助将不胜感激谢谢！

【问题讨论】：

你能不能用:nth-of-type(even):last-child:before 而不是必须在前面的元素上做:after？

【参考方案1】：

你可以使用:nth-last-of-type:

.wrapper div:nth-of-type(even) + div:nth-last-of-type(2) 
    background-color: #ADD8E6;


/* for when there are only two occurrences of this element type */
.wrapper div:nth-last-of-type(2):first-of-type 
    background-color: #ADD8E6;

第一个选择器将设置倒数第二个div 的样式，前提是它紧跟在偶数出现的div 之前。第二个选择器是设置倒数第二个div 时的第一个div 的样式（当只有两个divs 时）。为了便于阅读，我使用了两个声明。

查看this 演示。

但是，请确保对伪类的支持足以满足您的要求。 This page (2013) 状态：

:nth-last-of-type 是在 CSS 选择器模块 3 中引入的，这意味着旧版本的浏览器不支持它。然而，现代浏览器的支持是无可挑剔的，新的伪选择器在生产环境中被广泛使用。如果您需要旧版浏览器支持，可以为 IE 使用 polyfill，或者以非关键方式使用这些选择器，例如渐进式增强，这是推荐的。

This MDN 页面声明以下浏览器在给定版本中具有“基本支持”：

┌────────┬─────────────────┬───────────────────┬───────┬────────┐
│ Chrome │ Firefox (Gecko) │ Internet Explorer │ Opera │ Safari │
├────────┼─────────────────┼───────────────────┼───────┼────────┤
│   4.0  │   3.5 (1.9.1)   │        9.0        │  9.5  │   3.2  │
└────────┴─────────────────┴───────────────────┴───────┴────────┘

对于移动浏览器：

┌─────────┬────────────────────────┬───────────┬──────────────┬───────────────┐
│ android │ Firefox Mobile (Gecko) │ IE Mobile │ Opera Mobile │ Safari Mobile │
├─────────┼────────────────────────┼───────────┼──────────────┼───────────────┤
│   2.1   │       1.0 (1.9.1)      │    9.0    │     10.0     │      3.2      │
└─────────┴────────────────────────┴───────────┴──────────────┴───────────────┘

【讨论】：

如果 last 元素是偶数，我认为 OP 是在要求将元素 before 作为最后一个元素的目标。

如果last元素是偶数，那么倒数第二个元素是奇数，倒数第三个 元素是偶数。如果 third-to-last 元素是偶数，我提供的代码会设置 second-to-last 元素的样式。我错过了什么吗？我的代码演示不是针对您描述的元素吗？

嗯，它似乎应该工作。我检查了演示，它对我不起作用。 （在 Chrome 中）

我的显示器设置为昏暗模式，因此演示中的填充颜色不是很突出。不是你的错:)（我也有点盲目）

很棒的答案。我从没想过CSS可以实现这些:)