如何根据纯css中的单元格值为行着色？答案

【问题标题】：How to color a row based on cell value in pure css?如何根据纯css中的单元格值为行着色？
【发布时间】：2020-06-10 09:39:24
【问题描述】：

我正在使用一个生成非常分层的 css 的框架。

我只想根据字符串单元格值（一列）简单地为整行（或每个单元格）提供背景颜色。我不想使用 javascript 而是纯 css。

下面是 html css sn-p，其中整行应该获得基于 <td title="Geen Voorraad"> 的背景颜色。标题值具有不同的值，因此 Geen Voorraad 应添加红色背景色。谁有解决办法？

<div class="mx-grid mx-datagrid mx-name-grid2 voorraad" id="mxui_widget_DataGrid_2" data-mendix-id="0_22" data-focusindex="0" widgetid="mxui_widget_DataGrid_2" style="">
  <div class="mx-grid-searchbar" dojoattachpoint="searchNode">
    <div class="mx-grid-search-inputs" dojoattachpoint="searchArgumentNode">
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_8" widgetid="mxui_widget_SearchInput_8">
        <div class="mx-grid-search-label">
          <label>Naam</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField11">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_9" widgetid="mxui_widget_SearchInput_9">
        <div class="mx-grid-search-label">
          <label>Code</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField18">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_10" widgetid="mxui_widget_SearchInput_10">
        <div class="mx-grid-search-label">
          <label>Prijs</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField12">
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="mx-grid-search-item" id="mxui_widget_SearchInput_11" widgetid="mxui_widget_SearchInput_11">
        <div class="mx-grid-search-label">
          <label>Voorraadstatus</label>
        </div>
        <div class="mx-grid-search-input mx-name-searchField1">
          <select class="form-control">
            <option value=""></option>
            <option value="mxui_widget_SearchInput_11_Inactief">Gearchiveerd</option>
            <option value="mxui_widget_SearchInput_11_ActiefVoldoendeVoorraad">Voldoende Voorraad</option>
            <option value="mxui_widget_SearchInput_11_ActiefBeperkteVoorraad">Beperkte Voorraad</option>
            <option value="mxui_widget_SearchInput_11_ActiefGeenVoorraad">Geen Voorraad</option>
            <option value="mxui_widget_SearchInput_11_Verlopen">Verlopen</option>
          </select>
        </div>
      </div>
    </div>
    <div class="mx-grid-search-controls" dojoattachpoint="searchControlNode">
      <button type="button" class="btn mx-button btn-default mx-name-search mx-grid-search-button" id="mxui_widget_Button_12" widgetid="mxui_widget_Button_12"> Zoeken </button>
      <button type="button" class="btn mx-button btn-default mx-name-reset mx-grid-reset-button" id="mxui_widget_Button_13" widgetid="mxui_widget_Button_13"> Wissen </button>
    </div>
    <div class="mx-grid-search-message" dojoattachpoint="messageNode" style="display: none;"></div>
  </div>

  <div class="mx-grid-controlbar" dojoattachpoint="controlNode">
    <div class="mx-grid-toolbar" dojoattachpoint="toolBarNode">
      <button type="button" class="btn mx-button mx-name-newButton2 btn-success" id="mxui_widget_ControlBarButton_10" data-mendix-id="0_17" title="" widgetid="mxui_widget_ControlBarButton_10" data-roving-tabindex="" tabindex="0"> Product toevoegen </button>
      <button type="button" class="btn mx-button mx-name-actionButton3 btn-primary" id="mxui_widget_ControlBarButton_11" data-mendix-id="0_18" title="" widgetid="mxui_widget_ControlBarButton_11" data-roving-tabindex="" tabindex="-1"> Product bewerken </button>
      <button type="button" class="btn mx-button mx-name-actionButton4 btn-danger" id="mxui_widget_ControlBarButton_12" data-mendix-id="0_19" title="" widgetid="mxui_widget_ControlBarButton_12" data-roving-tabindex="" tabindex="-1"> Product verwijderen </button>
      <button type="button" class="btn mx-button mx-name-actionButton5 btn-inverse" id="mxui_widget_ControlBarButton_13" data-mendix-id="0_20" title="" widgetid="mxui_widget_ControlBarButton_13" data-roving-tabindex="" tabindex="-1"> Product archiveren </button>
      <button type="button" class="btn mx-button mx-name-exportToExcelButton2 btn-default" id="mxui_widget_ControlBarButton_14" data-mendix-id="0_21" title="" widgetid="mxui_widget_ControlBarButton_14" data-roving-tabindex="" tabindex="-1"> Naar Excel exporteren </button>
    </div>
    <div class="mx-grid-pagingbar" dojoattachpoint="pagingBarNode" role="navigation" aria-label="Paginering">
      <button type="button" class="btn mx-button mx-name-paging-first" id="mxui_widget_Button_14" aria-label="Ga naar de eerste pagina" widgetid="mxui_widget_Button_14" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-step-backward"></span> </button>
      <button type="button" class="btn mx-button mx-name-paging-previous" id="mxui_widget_Button_15" aria-label="Ga naar de vorige pagina" widgetid="mxui_widget_Button_15" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-backward"></span> </button>
      <div class="dijitInline mx-grid-paging-status" aria-hidden="true">1 tot 2 van 2</div> <span class="sr-only" tabindex="0" data-roving-tabindex="">Huidige weergave 1 tot 2 van 2</span>
      <button type="button" class="btn mx-button mx-name-paging-next" id="mxui_widget_Button_16" aria-label="Ga naar de volgende pagina" widgetid="mxui_widget_Button_16" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-forward"></span> </button>
      <button type="button" class="btn mx-button mx-name-paging-last" id="mxui_widget_Button_17" aria-label="Ga naar de laatste pagina" widgetid="mxui_widget_Button_17" data-roving-tabindex="" tabindex="-1" disabled="disabled"><span class="glyphicon glyphicon-step-forward"></span> </button>
    </div>
  </div>

  <div class="mx-grid-content" dojoattachpoint="contentNode" style="height: auto;">
    <table dojoattachpoint="gridTable">
      <caption class="sr-only" dojoattachpoint="gridCaptionNode"></caption>
      <colgroup dojoattachpoint="colGroupNode">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
        <col style="width: 20%;">
      </colgroup>
      <thead dojoattachpoint="gridHeadNode">
        <tr class="mx-name-head-row">
          <th data-id="57" class="mx-name-column11 mx-left-aligned" title="Naam">
            <div class="mx-datagrid-sort-icon" style=""><span class="mx-datagrid-sort-text">▲</span></div>
            <div class="mx-datagrid-head-caption">Naam</div>
          </th>
          <th data-id="58" class="mx-name-column12 mx-left-aligned" title="Code">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Code</div>
            <div class="mx-datagrid-column-resizer" data-id="62"></div>
          </th>
          <th data-id="59" class="mx-name-column1 mx-right-aligned" title="Prijs">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Prijs</div>
            <div class="mx-datagrid-column-resizer" data-id="63"></div>
          </th>
          <th data-id="60" class="mx-name-column13 mx-right-aligned" title="Voorraad">
            <div class="mx-datagrid-sort-icon" style="display: none"><span class="mx-datagrid-sort-text"></span></div>
            <div class="mx-datagrid-head-caption">Voorraad</div>
            <div class="mx-datagrid-column-resizer" data-id="64"></div>
          </th>
          <th data-id="61" class="mx-name-column20 mx-left-aligned" title="Voorraadstatus">
            <div class="mx-datagrid-sort-icon" style=""><span class="mx-datagrid-sort-text">▼</span></div>
            <div class="mx-datagrid-head-caption">Voorraadstatus</div>
            <div class="mx-datagrid-column-resizer" data-id="65"></div>
          </th>
        </tr>
      </thead>
      <tbody dojoattachpoint="gridBodyNode">
        <tr class="mx-name-index-0 background-red" data-id="72" data-roving-tabindex="" tabindex="0">
          <td data-id="73" class="mx-name-column11 mx-left-aligned" title="2">
            <div class="mx-datagrid-data-wrapper">2</div>
          </td>
          <td data-id="74" class="mx-name-column12 mx-left-aligned" title="2">
            <div class="mx-datagrid-data-wrapper">2</div>
          </td>
          <td data-id="75" class="mx-name-column1 mx-right-aligned" title="0,00">
            <div class="mx-datagrid-data-wrapper">0,00</div>
          </td>
          <td data-id="76" class="mx-name-column13 mx-right-aligned" title="0">
            <div class="mx-datagrid-data-wrapper">0</div>
          </td>
          <td data-id="77" class="mx-name-column20 mx-left-aligned" title="Geen Voorraad">
            <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$Red.png?637183236919148969"></div>
          </td>
        </tr>
        <tr class="mx-name-index-1 background-orange" data-id="78" data-roving-tabindex="" tabindex="-1">
          <td data-id="79" class="mx-name-column11 mx-left-aligned" title="rrew">
            <div class="mx-datagrid-data-wrapper">rrew</div>
          </td>
          <td data-id="80" class="mx-name-column12 mx-left-aligned" title="rere">
            <div class="mx-datagrid-data-wrapper">rere</div>
          </td>
          <td data-id="81" class="mx-name-column1 mx-right-aligned" title="1321,00">
            <div class="mx-datagrid-data-wrapper">1321,00</div>
          </td>
          <td data-id="82" class="mx-name-column13 mx-right-aligned" title="1">
            <div class="mx-datagrid-data-wrapper">1</div>
          </td>
          <td data-id="83" class="mx-name-column20 mx-left-aligned" title="Beperkte Voorraad">
            <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$yellow.png?637183236919148969"></div>
          </td>
        </tr>
      </tbody>
      <tfoot dojoattachpoint="gridFootNode" style="display: none;"></tfoot>
    </table>
  </div>
</div>

【问题讨论】：

CSS 无法实现您想要的。你不能在层次结构中上升
这能回答你的问题吗？ Is there a CSS parent selector?
@jsduniya 关于 CSS 的问题不需要“jsfiddle”。堆栈片段工作正常。
不，我不知道如何编写完整的 css 路径来应用选择器..你有什么想法吗？
你可以用 CSS 来做，但是会涉及很多硬编码。例如，您可以根据数据属性中的值使用数据属性和 CSS 属性选择器进行样式设置。但是看看你的表，似乎有很多行，这对于大表来说不是一个好的解决方案。最好的解决方案是使用 JavaScript，因为它可以保持代码的简洁和简洁。示例：css-tricks.com/almanac/selectors/a/attribute

标签： html css

【解决方案1】：

如果您可以将带有标题的 td 移动到行首，那么您可以这样做。

td[title="Geen Voorraad"], td[title="Geen Voorraad"] ~ td {
  background-color: red;
}

            <tbody dojoattachpoint="gridBodyNode">
                <tr class="mx-name-index-0 background-red" data-id="72" data-roving-tabindex="" tabindex="0">
                    <td data-id="77" class="mx-name-column20 mx-left-aligned" title="Geen Voorraad">
                        <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$Red.png?637183236919148969"></div>
                    </td>
                    <td data-id="73" class="mx-name-column11 mx-left-aligned" title="2">
                        <div class="mx-datagrid-data-wrapper">2</div>
                    </td>
                    <td data-id="74" class="mx-name-column12 mx-left-aligned" title="2">
                        <div class="mx-datagrid-data-wrapper">2</div>
                    </td>
                    <td data-id="75" class="mx-name-column1 mx-right-aligned" title="0,00">
                        <div class="mx-datagrid-data-wrapper">0,00</div>
                    </td>
                    <td data-id="76" class="mx-name-column13 mx-right-aligned" title="0">
                        <div class="mx-datagrid-data-wrapper">0</div>
                    </td>
                </tr>
                <tr class="mx-name-index-1 background-orange" data-id="78" data-roving-tabindex="" tabindex="-1">
                    <td data-id="79" class="mx-name-column11 mx-left-aligned" title="rrew">
                        <div class="mx-datagrid-data-wrapper">rrew</div>
                    </td>
                    <td data-id="80" class="mx-name-column12 mx-left-aligned" title="rere">
                        <div class="mx-datagrid-data-wrapper">rere</div>
                    </td>
                    <td data-id="81" class="mx-name-column1 mx-right-aligned" title="1321,00">
                        <div class="mx-datagrid-data-wrapper">1321,00</div>
                    </td>
                    <td data-id="82" class="mx-name-column13 mx-right-aligned" title="1">
                        <div class="mx-datagrid-data-wrapper">1</div>
                    </td>
                    <td data-id="83" class="mx-name-column20 mx-left-aligned" title="Beperkte Voorraad">
                        <div class="mx-datagrid-data-wrapper"><img src="http://localhost:8080/img/Main$Images$yellow.png?637183236919148969"></div>
                    </td>
                </tr>
            </tbody>

【讨论】：

【解决方案2】：

在纯 CSS 中不可能根据其内容选择元素。但是在您发布的代码中，您在每一行上应用了一个不同的类，所以 - 如果你能做到这一点 - 这会成功。否则你需要一对 javascript...

[更新] 我找到了一种（非常棘手的）方法来做到这一点；从您的 html 代码开始，我添加了一个伪元素，用作整行的背景；这要求 TR 具有相对位置（因此它们必须将 display 属性设置为与“table-row”不同的值，在这种情况下我选择了“flex”）。这是css代码：

.voorraad tr, 
.voorraad tr div 
{
  position: relative;
  overflow: hidden;
}

.voorraad tr div 
{
  z-index:1;
}

.voorraad tr,
.mx-name-head-row
{
  display:flex;
  justify-content:center;
  align-items:center;
}

.voorraad td,
.mx-name-head-row th
{
  flex:1;
  text-align:center;
}

td[title="Geen Voorraad"]:before
{
  content: "";
  display:block;
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:orange;
}

这不是您所说的“干净代码”，但它确实可以工作。

【讨论】：