CSS 技巧 : nth-of-type()

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

例如: 如果呈现的 div-x 为 4，则将伪元素应用于第三个 div-x，否则不要

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

&: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) 指出:

:nth-last-of-type was introduced in CSS Selectors Module 3, which means old versions of browsers do not support it. However, modern browser support is impeccable, and the new pseudo-selectors are widely used in production environments. If you require older browser support, either polyfill for IE, or use these selectors in non-critical ways á la progressive enhancement, which is recommended.

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