可以使用 CSS 设置动态类的样式吗? [复制]

2024-02-01

我有一堂课叫.box-159每次刷新屏幕时数字都会变化。有没有办法定义这个字段(比如background-color)在CSS中?


是的,仅使用 CSS 就可以实现。

选项 #1 - 按前缀值匹配

  • Use CSS 类选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors ^="class"选择类以“为前缀的所有元素box-"
[class^="box-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>

选项 #2 - 匹配依据至少包含一个值

  • 使用另一个CSS 类选择器 *="class"(相当于CSS 属性选择器 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) 选择其类至少包含一个子字符串的所有元素“box-".
[class*="box-"] {
  background: red;
  height: 100px;
  width: 100px;
  margin: 10px 0;
  display:block
}
<div class="box-159"></div>
<span class="box-147"></span>
<article class="box-76878"></article>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

可以使用 CSS 设置动态类的样式吗? [复制] 的相关文章

  • 使用 CSS 删除不需要的表格单元格边框

    我有一个奇怪且令人沮丧的问题 对于简单的标记 table thead tr th 1 th th 2 th th 3 th tr thead tbody tr td a td td b gt td td c td tr tr class o
  • 是否可以通过 CSS 3 使用文本内容设置元素中文本的颜色?

    好吧 这更像是一个有很多非 CSS 解决方案的问题 但我希望更多地从理论角度来做这件事 我有一个它的应用程序 但不值得以任何其他方式对其进行编码 有趣的 问题 如何使用元素的文本为元素的文本着色 我有一个元素 全部都是它自己的 它将包含颜色
  • h2 设置背景颜色和下划线

    我需要帮助解决这个 CSS 问题 我想要风格 h2 元素的背景颜色仅适用于文本 并且还有边框底部 这是预览 我可以自己做这件事 这并不难 但问题是我无法添加额外的元素 比如 span 标签 内 h2 标签 所以我正在寻找一种纯CSS方式来实
  • 菜单作为水平无序列表或表格?

    我有一个无序列表 水平显示为页面的顶部菜单栏 我已经让它显示得相对较好 尽管我一直在调整 IE6 和 IE7 的间距 因为它无法正常显示 令人震惊 无论哪种情况 使用表格来显示菜单还是使用一些CSS hack 我找不到解决方法 会更好吗 显
  • scrollWidth/scrollHeight 给出无效尺寸

    如所述https developer mozilla org en Determining the dimensions of elements https developer mozilla org en Determining the
  • UL 标签内的标签 H3 [重复]

    这个问题在这里已经有答案了 可能的重复 UL 中是否允许除 LI 之外的任何内容 https stackoverflow com questions 6056142 is anything except lis allowed in a u
  • Ionic 2 占位符文本样式

    我正在使用 Ionic 2 rc0 开发一个应用程序 并且整个应用程序中有几个仍然需要样式设置的输入字段
  • 为整个网站设置单个图标

    目前我正在使用这段代码将网站图标添加到网站 但是 必须将此代码添加到每个 HTML 页面中 有谁知道如何设置全局图标 我看过的所有地方都告诉我必须将其添加到每个页面 UPDATE Chrome 在根目录中搜索 favicon ico 文件
  • iOS Safari 通过单击按钮触发扫描信用卡

    您好 我目前正在创建一个测试应用程序 当用户单击文本字段名称或卡号时 扫描信用卡功能对我有用 我的问题是 我希望当用户单击 button1 时发生同样的情况 这应该打开相机来扫描卡并填充现有的文本字段 即名称 卡号和到期日期 额外的好处是
  • 如何通过 HTML 按钮播放声音

    我目前通过网站播放音乐的方法是通过 HTML 音频标签 不过我希望能够通过 HTML 按钮来播放它 该按钮应该能够在播放和停止之间切换音乐 我在 JSFiddle 创建了一个示例 但不知道如何实现它 有人可以告诉我如何使用我的 JSFidd
  • PHP函数返回值到html标签

    我想获取函数的返回值并将其显示到特定的id 在我的 Class php 中 我有一个名为 login 的函数 用于验证密码是否正确 不正确
  • XPATH 查询、HtmlAgilityPack 和提取文本

    我一直在尝试从名为 tim new 的类中提取链接 我也得到了解决方案 给出了解决方案 片段和必要的信息here https stackoverflow com questions 2982862 extracting a table ro
  • 如何改变HTML5视频的播放速度?

    如何更改 HTML5 中的视频播放速度 我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点 根据这个网站 http www chipwreck
  • HTML colorpicker 发生变化时如何获取新值?

    我正在开发一个需要更改 HTML 颜色的网络应用程序canvas基于的价值观colorpicker 我有一个colorpicker在我需要获取的 HTML 中value从每次更新开始
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 一旦 webapp 添加到主屏幕,是否可以强制 iphone/ipod 更新 apple-touch-icon?

    我使用 safari 的所有推荐链接和元标记创建了一个网络应用程序 例如
  • CSS - 第一个没有特定类别的孩子

    是否可以编写一个 CSS 规则来选择没有特定类的元素的第一个子元素 example div span class common class ignore span span class common class ignore span sp
  • html,将链接显示为普通文本

    我想知道您是否可以将链接显示为普通文本 a href target self img src width 121 height 20 alt div style font size 12px display block font color
  • 我可以使用 jQuery 动态创建文件(及其内容)吗? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li

随机推荐

  • 将 HTML 传递给 HTML 模板

    我知道如果我们想将变量从 gs 传递到 HTML 模板 我们可以这样做 在 html 上 使用 div table thead th Qty th th Item th th Price th th Subtotal th thead tb
  • 使用保留下划线的 xjb 覆盖 JAXB 属性名称

    自定义 xjb 非常适合根据需要覆盖名称 但是我们会丢失名称中的下划线
  • \S、\W、\D 在正则表达式中代表什么?

    在 shell 脚本中 t 代表制表符 s 代表空白 w 代表单词 什么是 W capital W and D capital D 用于 W是相反的 w and D是相反的 d 就像 S是相反的 s W and D分别会匹配什么 w and
  • 刷新 InnoDB 缓存

    我有一些很少运行的报告查询 我需要保证它们的性能 而不依赖于将它们缓存在系统中的任何位置 在测试各种模式和存储过程更改时 我通常会看到第一次运行非常慢 而后续运行速度很快 所以我知道正在进行一些缓存 这使得测试更改变得很麻烦 重新启动 my
  • 如何将方法作为参数传入?

    我刚刚注意到我在 ASP NET 应用程序中重复了很多 C 代码 因此想要创建一个通用方法 我有一系列这样的私有方法 private void PopulateMyRepeatedControl DBUtil DB new DBUtil D
  • 谷歌电子表格中的逻辑例外/差异范围

    我想变得合乎逻辑 A B or A B 在谷歌电子表格中 所以 有 A A 1 2 3 4 and B B 2 3 5 6 所以我的公式 my amazing formula A A B B 应该返回 1 4 A 的元素不存在于 B 中 问
  • React 等价于 ng-repeat

    我是 React js 的新手 我正在尝试绑定数据数组 我正在寻找 ng repeat 的等效项 但我在文档中找不到它 e g var data red green blue 使用角度我会在我的html中做这样的事情 div i div 我
  • OpenGL 编译着色器已损坏

    我正在尝试在 OpenGL 3 2 中编译着色器程序 但遇到奇怪的链接错误 创建顶点和片段着色器并编译并附加它们后 我尝试将它们链接到程序中 但收到以下信息日志错误 ERROR Compiled vertex shader was corr
  • 在 Google 地图上放置街景按钮

    如何在相当典型的 Google 地图上放置街景按钮 使其与右上角的标准地图 卫星 混合按钮一致 我见过这样的一个例子 但现在找不到了 所以 我知道这是可能的 确实是的 人们可以在地图选项中指定控制位置 寻找控制定位 in the 在线文档
  • 有没有办法通过 adobe air 在 Android 上访问蓝牙

    您可以通过 adobe air for mobile 访问 android 的蓝牙 API 吗 确实有一个 Native Process API http tv adobe com watch adc presents invoke nat
  • 从结果创建 Observable

    我正在尝试 Angular2 我注意到 http 服务使用Observable对象而不是Promise 我不太喜欢这个选择 async await即将抵达 在我的服务中 我下载了一份列表Plants来自网络服务 单击植物 我会使用路由显示详
  • Foreach 与 Scala 中的 Map [重复]

    这个问题在这里已经有答案了 我尝试了两种方法来列出一些东西 var response List RS TxnNested consumertxnlist foreach txData gt response RS TxnNested bla
  • 动态改变较少的变量

    我想在客户端更改一个 less 变量 假设我有一个 less 文件 color1 123456 color2 color1 111111 title color color1 text color color2 我希望用户选择一种颜色并更改
  • touchDragged 在 libgdx 中如何工作?

    我目前正在学习libgdx游戏编程 现在我已经学会了如何使用touchDown 但我不知道如何使用touchDragged 计算机如何知道手指被拖动的方向 用户是否向左或向右拖动 计算机不知道这一点 或者至少界面不会告诉你这个信息 它看起来
  • Web 服务器找不到请求的资源 Visual Studio 调试

    Issue 我有一个在 Visual Studio 2012 中运行的 net 4 0 Web 应用程序 每次我去调试该站点时都会收到以下错误 Web 服务器找不到请求的资源 我尝试过的 我已经按照微软的网站提供了解决方案 msdn htt
  • 存储 JavaScript 对象的状态

    我试图将 this 的统计信息存储在我的 javscript 对象中 以便稍后在我的应用程序中我可以将 this 返回到之前的状态 我以为我可以使用闭包来完成 但到目前为止我还没有成功 我的想法是做这样的事情 function SavedF
  • 对 char 进行按位运算给出 32 位结果

    我一直在用 C 编写一个程序 将字符的前 4 位移至末尾 将后 4 位移至开头 对于大多数值 它可以正常工作 以及相反的操作 但对于某些值 如 8 x y z 它给出的结果是 32 位值 通过打印变量的十六进制值检查值 谁能解释为什么会发生
  • Selenium-js:Firefox:错误:TimedPromise 在 300000 毫秒后超时

    我正在尝试在网站上运行我的 selenium javascriptbet365 com https bet365 com 我使用的是 Firefox geckodriver 我尝试了无头模式和正常模式 但为了理解 调试问题 非无头模式很有帮
  • 如何将 XAResource 与现有事务一起使用?

    我的用例是 我有一个现有的 JTA TransactionManager 和一个正在进行的事务 我想在此事务中将 Neo4j 列为 XAResource 以便它可以在适当的 2PC 中准备 提交 我没有在 Neo4j 中看到公共 XARes
  • 可以使用 CSS 设置动态类的样式吗? [复制]

    这个问题在这里已经有答案了 我有一堂课叫 box 159每次刷新屏幕时数字都会变化 有没有办法定义这个字段 比如background color 在CSS中 是的 仅使用 CSS 就可以实现 选项 1 按前缀值匹配 Use CSS 类选择器