html - 如何在任何 html 控件或没有任何 html 控件的文本中应用 css

Question

我有一张 table 。一些 td 有 palin 文本，一些 td 在 div 中有文本。

<table class="k-selectable" role="grid" data-role="selectable">
    <tbody>
        <tr class="k-state-selected" role="row" aria-selected="true">
            <td class="center" role="gridcell">
            </td>
            <td class="center" role="gridcell">
                <div class="rc-sprite-td sprite-null">
                    &nbsp;</div>
            </td>
            <td role="gridcell">
                <div class="wb-ro-changed">
                    24261&nbsp;<span><img src="/RepairCenterWeb/Whiteboard/GetImage?IsOnHold=false&amp;IsVoid=false"></span></div>
            </td>
            <td role="gridcell">
                Issue 11
            </td>
            <td class="money" role="gridcell">
                <span class="float-left rc-sprite-td sprite-null">&nbsp;</span>$1,186.55
            </td>
            <td role="gridcell">
                <div class="wb-arrival-overdue">
                    10/9/2013</div>
            </td>
            <td role="gridcell">
                <div class="wb-delivery-overdue">
                    10/9/2013</div>
            </td>
            <td role="gridcell">
            </td>
            <td role="gridcell">
            </td>
            <td class="center" role="gridcell">
                <div class="rc-sprite-td sprite-null">
                    &nbsp;</div>
            </td>
            <td class="center" role="gridcell">
                <img src="/RepairCenterWeb/Whiteboard/GetImage?IsClosed=false&amp;HasPpi=false&amp;IsPpiVeto=false&amp;IsPartsDeleted=false&amp;HasPartsSupplement=false&amp;HasLaborSupplement=false">
            </td>
            <td class="center" role="gridcell">
                <img src="/RepairCenterWeb/Whiteboard/GetImage?HasSublet=false&amp;SubletStatus=0&amp;HasCriticalNote=false">
            </td>
            <td class="center" role="gridcell">
                <div class="rc-sprite-td sprite-null">
                    &nbsp;</div>
            </td>
            <td role="gridcell">
                <div class="center no">
                    No</div>
            </td>
            <td role="gridcell">
                <div class="center ">
                </div>
            </td>
            <td role="gridcell">
                <div class="center ">
                </div>
            </td>
            <td role="gridcell">
                <div class="center no">
                    No</div>
            </td>
            <td role="gridcell">
                <div class="center ">
                </div>
            </td>
            <td role="gridcell">
                s s
            </td>
        </tr>
    </tbody>
</table>

CSS 是

.k-state-selected:hover {
  color: #ffffff;
  background-color: #0992eb;
  border-color: #0992eb;
}
.k-state-selected td div{color: #ffffff;}

当我选择任何行时，它会显示蓝色背景和白色文本。我的问题是它对 div 文本内部和内部的纯文本工作正常。任何人都可以在跨度、标签等内添加文本。所以在这种情况下，我必须添加以下内容

 .k-state-selected td label{color: #ffffff;}
 .k-state-selected td span{color: #ffffff;}

有什么方法可以在td中的html控件中应用css进行测试。

Answer 1

您可以使用“任何元素”选择器*:

.k-state-selected td * {color: #ffffff;}

只有当 td 有(至少)一个子元素时才会匹配。