html - CSS - 如果父元素有::before，则样式化子元素

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 有::before ，我怎样才能有不同的样式？

Answer 1

CSS 中的

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

例如，此代码在 div 悬停时更改背景:

div:hover{background: Red}

然而，这段代码在 div 中设置了一个伪元素的样式，但放置在它的所有子元素之前:

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

这就是为什么 没有办法 知道是否有 CSS 伪元素。因为它是 CSS 创建伪元素。

解决方案:

当您为 td 定义一个伪元素时，还要为它的子元素定义样式。