使用纯 CSS 访问跨度内容并设置其样式

发布于08月27日

我正在使用一个动态数据表，我需要Availability列中的文本 colored颜色根据通用数据库中的包状态动态更改.具体来说，我希望"库存"是绿色的，而"缺货"是红色的.以下是HTML struct 的简化版本:

<div class="fd-datatable">
    <div class="innerScrollContainer">
        <div class="row" role="row" tabindex="0" aria-rowindex="1" aria-label="row">
            <div aria-colindex="1" role="gridcell">
                <!-- ... other columns ... -->
                <div aria-colindex="4" role="gridcell">
                    <span>In Stock</span>
                </div>
                <!-- ... other columns ... -->
            </div>
        </div>
        <!-- ... other rows ... -->
    </div>
</div>

如何访问标记中每行的文本，以便更改其 colored颜色 using only CSS？

推荐答案

你不能这样做，但这里有一个小技巧来实现你想要的.它依赖于这样一个事实，即两个文本不会采用相同的宽度，所以我将使用大小作为条件来应用不同的 colored颜色 .

下面是一个简化的例子.90px是控制条件的，你需要根据你的真实代码来调整它

span {
  display: inline-block;
  font-size: 20px;
  color: #0000;
  background: 
    linear-gradient(green 0 0) 0/calc(90px - 100%) 1%,
    linear-gradient(red   0 0) 0/calc(100% - 90px) 1%;
  -webkit-background-clip: text;
          background-clip: text;
}

<span>In Stock</span>
<span>Out of Stock</span>
<span>Out of Stock</span>
<span>In Stock</span>

我有详细的文章，其中我解释了这样一个诀窍和更多:https://css-tricks.com/responsive-layouts-fewer-media-queries/

Css相关问答推荐

如何使用TailwindCSS溢出？

在css网格中用一个锚标签(顶部/底部边距)包装图像？

使用SVG以竖排书写模式创建渐变文本时，文本显示异常

CSS Select 器 $parent > $child Select 嵌套列表中的所有
子元素

TypeScript 中有效的 CSS 属性名称数组，但带有连字符

在 dbc.Container 上方包含横幅 - Dash

在不使用 position： fixed 的情况下从 CSS 网格中的自动布局中免除子元素？

用css画3个三角形

如何应用适当样式的元素加消息框？

带有图像的 CSS 网格在 Firefox 中表现不同

未知规则 @propertycss(unknownAtRules)

有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名？

CSS，居中的 div，缩小以适应？

我应该避免使用text-align： justify;吗？

如何更改下拉列表的宽度？

中心表单提交按钮 HTML / CSS

隐藏在AngularJs中的可见性？

如何使用 JavaScript 获取元素的背景图片 URL？

：last-child 没有按预期工作？

仅针对使用的类优化 Font Awesome

实用课程推荐