nth-child:如何选择两个一组的元素

2024-01-06

假设我有一个这样的表:

 <div class="fc-slats">
  <table>
    <tbody>
      <tr>
        <td class="fc-widget-content fc-major">16</td>
        <td class="fc-widget-content fc-minor">16</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">18</td>
        <td class="fc-widget-content fc-minor">18</td>
      </tr>
    </tbody>
  </table>
  </div>

我希望第一个和第二个单元格具有一种颜色,第三个和第四个单元格具有另一种颜色,第五个和第六个单元格具有第一种颜色......换句话说,这是旧的奇偶交替配色方案,除了每组中有两个细胞。

我正在尝试用 CSS 来做到这一点nth-child选择器:

fc-slats td:nth-child(int(n/2)) {
  background-color: red;
}

但我不知道如何准确地编写“nth-child”选择器的公式。我想 CSS 不支持数学函数,比如int,或类似条件if... then,那么在这种情况下,我将如何实现这一目标?

编辑:为了简洁起见,我刚刚在此表中添加了 6 个单元格,但假设该表将具有任意长度;换句话说,我正在寻找一个“通用”解决方案。


您可以选择每四个td以及它的前一个兄弟nth-child(4n) and nth-child(4n - 1):

td {
  background: blue;
}

td:nth-child(4n), td:nth-child(4n - 1) {
  background: red;
}
 <div class="fc-slats">
  <table>
    <tbody>
      <tr>
        <td class="fc-widget-content fc-major">16</td>
        <td class="fc-widget-content fc-minor">16</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">17</td>
        <td class="fc-widget-content fc-major">18</td>
        <td class="fc-widget-content fc-minor">18</td>
      </tr>
    </tbody>
  </table>
  </div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

nth-child:如何选择两个一组的元素 的相关文章

  • jQuery 面板滑块通过单击按钮打开但不会关闭

    我的页面上有一个按钮 可以使用 jquery 和 Modernizr 框架打开右侧面板 按钮位于屏幕最右侧 单击时 它会向左滑动并打开打开的面板 问题是 再次单击时它不会滑回到原来的位置 HTML div class cd panel fr
  • 自动调整元素 (div) 大小以适合水平内容

    我尝试谷歌搜索 但没有得到太多结果 我正在构建一个水平轮播 它在浮动的 LI 中显示图像 我想解决的问题是 每次我向轮播添加缩略图 我是延迟加载 时 我都需要重新计算轮播的宽度 以便所有浮动缩略图很好地并排排列 其一 我宁愿不必在 JS 中
  • Django 1.7:如何使用 html/css 文件作为模板发送电子邮件

    从 Django 1 7 开始 可以send email 使用新参数 html message 不幸的是 没有关于如何使用它的全面指南 新手友好 或者至少我找不到它 我需要使发送的电子邮件变得漂亮 因此 我试图弄清楚如何将我的消息包含到 h
  • 处理 iPhone X 系列上 Chrome 浏览器中的安全区域

    对于我管理的网站 我正在使用新的 iPhone X 系列屏幕安全区域safe area inset
  • CSS 省略号与内联元素?

    我已经调整了 jQuery UI MultiSelect Widget 以便文本将显示所有选定的标签 但如果选择显示太多元素 则文本将被修剪和省略 我是这样做的 ui multiselect selected text display bl
  • 检查元素是否在视口的 30% 到 60% 之间

    我正在尝试改变颜色 li 当元素占视口的 30 到 60 之间时 所以我有这个元素网格并排堆叠 如下所示 我遇到了一些插件 例如 Waypoints Viewport Checker 和其他一些插件 但没有什么好的 任何想法 我正在使用一个
  • 如何使 html 链接看起来像一个按钮?

    我正在使用 ASP NET 我的一些按钮只执行重定向 我宁愿它们是普通链接 但我不希望我的用户注意到外观上有太大差异 我考虑过用锚点 即标签 包裹的图像 但我不想每次更改按钮上的文本时都必须启动图像编辑器 将这个类应用到它上面 button
  • CSS - 设置 Div 的大小以填充剩余空间

    我是 CSS 新手 我正在尝试创建模板的准系统结构 我有一个用于页眉 主要内容和页脚的 div 我的页脚和页眉很好 但我需要主要内容 div 来 填充 页眉和页脚之间的剩余空间 我尝试将 padding bottom 属性设置为与页脚相同的
  • 更改网格模板列会破坏布局

    定义时grid template columns在相应的父 div 中这很好 wrapper display grid grid template columns 1fr 1fr 700px 但是如果我只想要两列怎么办 如果我删除其中之一f
  • 如何在 CSS 中将子元素居中,即使它比父元素大?

    我想创建一个 css 类 以便可以将 div 放置在其父级的中心 我正在使用的代码是 centered position absolute margin auto bottom 0px left 0px top 0px right 0px
  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • 为什么 z-index 对 div 不起作用?

    我试图让我的页脚显示在页脚背景的顶部 但 z index 似乎不起作用 有人看出它有什么问题吗 http jsfiddle net f2ySC http jsfiddle net f2ySC 你必须明确地定义position财产 foote
  • 生成基于内联 HTML 样式的样式表?

    一段时间以来 我一直致力于对网站的不同部分进行样式设计 但是我尚未将内联样式放入样式表中 我想知道是否存在一个工具可以解析 HTML 文件并从中生成样式表 例如 这是我网站的一个片段 div class block style border
  • CSS3家谱,如何添加妻子

    我正在关注这个guide http thecodeplayer com walkthrough css3 family tree关于如何仅使用 CSS3 制作家谱 但我真的不知道如何结婚 To clarify What the codes
  • 两个单独表格上的 Td 高度

    我有两个单独的表 我在每个 tr 上使用焦点 悬停函数 该函数同时在两个表上都很好用 我的问题是 td 高度 因为如果第一个表中 td 的描述更大 将显示在中的两行上相同的td和td的高度将被修改 但仅限于第一个表td 如何记住第一个表中
  • CSS 背景在 iOS 中拉伸以填充高度,但滚动上有空白

    这个 CSS 让我的背景在 iOS 中填充 100 的屏幕高度 但有一个小问题 当你向下滚动时 最初有空白 然后当你松开手指并停止滚动时 背景图像会 调整 并填充 100再次屏幕高度的 如果您继续滚动 该问题不会在同一页面上再次出现 只是第
  • BEM 与 SASS 和 :hover

    使用 BEM 和 SASS 声明活动 焦点 悬停状态的正确方法是什么 例如 我有这样的结构 div class card img class card image src alt div class card overlay div cla
  • 不透明度如何影响元素顺序?

    我发现 CSS 有一个非常奇怪的行为opacity与浮动元素相结合 考虑以下 HTML div div Right button div div div Overlay div 最后div将覆盖前两个浮动的 删除不透明度会将最新的 div
  • 在原始颜色和设置颜色之间设置动画背景

    我有带有随机初始背景颜色的 HTML 元素 我需要在原始 初始 和新元素之间对选定元素的背景颜色进行动画处理 我一直在尝试使用 keyframes blink red 0 background color initial color ini
  • Bootstrap 响应式图像缩放

    Using Twitter Bootstrap我意识到默认情况下它会响应式地缩放图像 这很棒 但并不总是完美的 比如说我有一个500x300桌面上的图像 然后它会针对移动设备调整大小 该图像将非常小而且不是很高 会丢失图像的大部分细节部分

随机推荐