CSS技巧：nth-of-type（）

Rockyboy_ruby 发表于 Dev

Rockyboy_ruby

嗨，我正在寻找一些特别的东西，甚至不确定是否可以使用纯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，则将伪元素应用于第3 div-x，否则不要

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

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

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

幽灵般的

您可以使用: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时）为第一个选择器设置样式。我仅出于可读性而使用了两个声明。

查看此演示。

但是，请确保对伪类的支持足以满足您的要求。该页面（2013年）指出：

:nth-last-of-type是在CSS选择器模块3中引入的，这意味着旧版本的浏览器不支持它。但是，现代浏览器的支持是无可挑剔的，并且新的伪选择器已广泛用于生产环境中。如果您需要较早的浏览器支持，则可以使用IE的polyfill或以非关键方式使用这些选择器，也可以使用渐进式增强，建议您这样做。

此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      │
└─────────┴────────────────────────┴───────────┴──────────────┴───────────────┘

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。