解决方案：

Question

我正在调用和设置类“myCheckboxLink”的链接，如下所示：

的CSS：

table.table-custom tbody td a.myCheckboxLink {
    /* styling */
}

HTML：

<table id="custom" class="display table-custom dataTable">
    <thead></thead>
    <tbody>
        <tr id="row_33" role="row" class="odd">
            <td class=" dt-checkbox" tabindex="0">
                <a class="myCheckboxLink" tabindex="0">
                    <span class="myCheckboxSpan">
                        <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
                    </span>
                </a>
            </td>
        </tr>
    </tbody>
</table>

如果td.dt-checkbox具有:: before ...我想为'myCheckboxLink'设置不同的样式：

控制台：

<table id="custom" class="display table-custom dataTable">
    <thead></thead>
    <tbody>
        <tr id="row_33" role="row" class="odd">
            <td class=" dt-checkbox" tabindex="0">
                ::before
                <a class="myCheckboxLink" tabindex="0">
                    <span class="myCheckboxSpan">
                        <i class="fa fa-check fa-check-checkbox" aria-hidden="true"></i>
                    </span>
                </a>
            </td>
        </tr>
    </tbody>
</table>

但这不起作用：

的CSS：

table.table-custom tbody td::before a.myCheckboxLink {
    display: none;
}

如果td.dt-checkbox具有::之前，我怎么能有不同的样式？

Answer 1

CSS中的

::before不是:hover或:visited这样的状态。相反，::before指的是与之前使用的元素内部的不同元素 - 伪元素。

例如，此代码正在更改div的背景，同时它正在悬停：

div:hover{background: Red}

但是，此代码在div内设置伪元素样式，但放在其所有子代之前：

div::before{background: Red; content: "I'm red."}

这就是无法知道是否存在CSS的伪元素的原因。因为它是CSS创建伪元素。

解决方案：

为td定义伪元素时，还要为其子元素定义样式。

CSS - 如果父级具有::

1 个答案:

解决方案：