如何编写给定此表的CSS Select 器

<table>
  <tr>
    <td>Cell 1</td>
    <td class="target">Cell 2</td>
    <td class="target">Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td class="target">Cell 5</td>
    <td>Cell 6</td>
    <td>Cell 7</td>
    <td class="target">Cell 8</td>
  </tr>
</table>

是否只 Select "单元格2"和"单元格5"?单元格可能具有类名的顺序对于每一行是随机的.唯一的保证是每行必须至少有一个包含类的单元格.

我try 了大约td.target:first-of-type,但是像这样的 Select 器首先应用pseduo类,然后限制类名,结果是"Cell 5".我需要首先应用类名,同时保持其第n个子状态,然后应用:first-of-type.

这个是可能的吗?

推荐答案

您可以针对.target后面不是.target的所有.target元素:-)

.target:not(.target ~ .target) { color: red }
<table>
  <tr>
    <td>Cell 1</td>
    <td class="target">Cell 2</td>
    <td class="target">Cell 3</td>
    <td>Cell 4</td>
  </tr>
  <tr>
    <td class="target">Cell 5</td>
    <td>Cell 6</td>
    <td>Cell 7</td>
    <td class="target">Cell 8</td>
  </tr>
</table>

Css相关问答推荐

如何为垫子制作圆角- Select 所有角点上的下拉列表

如何使用 Ant Design 为不同的屏幕尺寸制作自定义组件样式

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

CSS 内联 Flex 和段落换行

设置初始大小并记住分配的最后大小

Nextjs Tailwind Marquee 组件溢出

Img 未拉伸以满足所需的纵横比

如何使代码块输出在 quarto revealjs 演示文稿中水平滚动

before 元素的过渡效果

为什么这个绝对定位的 ::after 伪元素会崩溃,除非父级有过滤器?

react 样式的条件类名称设置

我无法覆盖 react ui 库中的组件样式

用css重复表格边框

在表格中隐藏绝对伪元素

将复选框对齐到中心

如何将页脚保持在屏幕底部

如何在 iOS 上获取带有 CSS 溢出的滚动条

CSS 块格式化上下文是如何工作的?

我的 inline-block 元素没有正确排列

在页面内容上方浮动一个 div