缩短重复元素和伪类组合的冗长 CSS

2023-11-29

我将不同的伪类和元素添加到表的相同部分。有没有办法通过某种方式总结来节省工作和精力?我不知道该怎么做。

.tr1 th:nth-child(1) {background-color: green;}
.tr1 th:nth-child(5) {background-color: green;}
.tr2 td:nth-child(2) {background-color: green;}
.tr2 td:nth-child(4) {background-color: green;}
.tr3 td:nth-child(3) {background-color: green;}
.tr4 td:nth-child(4) {background-color: green;}
.tr4 td:nth-child(2) {background-color: green;}

.tr1 th:nth-child(1):hover {background-color: hotpink;}
.tr1 th:nth-child(5):hover {background-color: hotpink;}
.tr2 td:nth-child(2):hover {background-color: hotpink;}
.tr2 td:nth-child(4):hover {background-color: hotpink;}
.tr3 td:nth-child(3):hover {background-color: hotpink;}
.tr4 td:nth-child(4):hover {background-color: hotpink;}
.tr4 td:nth-child(2):hover {background-color: hotpink;}

.tr1 th:nth-child(1)::selection {color: hotpink;}
.tr1 th:nth-child(5)::selection {color: hotpink;}
.tr2 td:nth-child(2)::selection {color: hotpink;}
.tr2 td:nth-child(4)::selection {color: hotpink;}
.tr3 td:nth-child(3)::selection {color: hotpink;}
.tr4 td:nth-child(4)::selection {color: hotpink;}
.tr4 td:nth-child(2)::selection {color: hotpink;}

您可以使用组合选择器:is()和逗号,

.tr1 th:is(:nth-child(1),:nth-child(5)),
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)),
.tr3 td:nth-child(3) {background-color:green}

.tr1 th:is(:nth-child(1),:nth-child(5)):hover,
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4)):hover,
.tr3 td:nth-child(3):hover {background-color:hotpink}

.tr1 th:is(:nth-child(1),:nth-child(5))::selection,
:is(.tr2,.tr4) td:is(:nth-child(2),:nth-child(4))::selection,
.tr3 td:nth-child(3)::selection {color:hotpink}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

缩短重复元素和伪类组合的冗长 CSS 的相关文章

  • Bootstrap 导航栏与 Google 位置重叠自动完成下拉菜单

    我有一个导航栏 我试图在其中添加一个地点搜索框 除了谷歌位置提示框的一小部分被导航栏重叠 如下图所示 之外 一切几乎都有效 我尝试过改变z index输入框的值改为10或2000或90000但似乎没有效果 我还缺少其他需要做的事情吗 这是
  • chrome 中选择选项元素的额外填充

    我有一个选择元素 用户可以在其中选择分类和描述 仅在 Chrome 浏览器中 我有一个额外的填充 无法使用 padding 0 或其他 css 标签删除它 Chrome 的屏幕 https i stack imgur com m3iIb p
  • 将图像编码为base64有什么效果?

    如果我将图像 jpg 或 png 转换为 base64 那么它会更大 还是具有相同的大小 会大多少呢 是否建议在我的网站上使用 Base64 编码的图像 大约会大 37 非常粗略地说 Base64 编码的二进制数据的最终大小等于原始数据大小
  • Gmail 无法在电子邮件上正确呈现字体

    我已经建立了一个 html 电子邮件并使用了 Google 字体 我已使用以下方法将字体包含在 head 标签中 if mso endif 并使用字体 即我这样做了
  • 闪亮的应用程序包:css 和所有 www/ 目录内容

    我正在尝试将 Shiny 应用程序转换为 R 包 但我在处理有关 www 目录以及 松散 文件的所有问题时遇到了问题 我闪亮的应用程序运行得很好 但是当我尝试 打包它 时 它不起作用 我闪亮的应用程序目录 my shiny app R ut
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • div 边框上的内边距

    我想在 css 边框上添加填充 将其拉入 div 内 远离边缘 使用 css 可以吗 css3 很好 webkit 这是设计 我通过将一个 div 放在一个 div 中 然后给内部 div 一个边框来做到这一点 我想让标记尽可能精简 所以如
  • rvest 函数 html_nodes 返回 {xml_nodeset (0)}

    我正在尝试抓取以下网站的数据框 http stats nba com game 0041700404 playbyplay http stats nba com game 0041700404 playbyplay 我想创建一个表格 其中包
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • :jQuery / Sizzle 中的 nth-of-type()?

    让我惊讶的是Sizzle http sizzlejs com jQuery 使用的选择器引擎 带有一个内置的 nth child 选择器 但缺少 nth of type 选择器 为了说明之间的区别 nth child and nth of
  • 显示覆盖以覆盖整个页面

    我有一个正在加载的网络应用程序iframe 我需要显示一个覆盖 div 来覆盖整个页面 问题是叠加层当前仅显示在iframe区域而不覆盖整个页面 我们的应用程序 子应用程序 是加载的一组应用程序的一部分iframe 你可以做这样的事情 di

随机推荐