Question

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

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

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

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

Answer 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时（当只有两个div时）。我仅仅为了便于阅读而使用了两个声明。

查看this演示。

但是，请确保对伪类的支持足以满足您的要求。 This页面（2013）声明：

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

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

CSS技巧：nth-of-type（）

1 个答案:

CSS技巧：nth-​​of-type（）

1 个答案:

CSS技巧：nth-of-type（）