元素与给定的孩子

这个问题在这里已经有了答案:

  • 有没有一个CSS父母选择器? 26个答案

  • 如果元素包含特定的子元素,是否可以选择它?

    遗憾的是还没有。

    CSS2和CSS3选择器规范不允许任何父类选择。


    关于规格更改的说明

    这是从这一点起对此帖子准确性的免责声明。 CSS中的父母选择器已经讨论了很多年了。 由于没有找到共识,变化一直在发生。 我会尽力保持这个答案是最新的,但请注意,由于规格的变化,可能会有不准确之处。


    一个较老的“选择器4级工作草案”描述了一个功能,它可以指定选择器的“主体”。 此功能已被删除,并且不会用于CSS实现

    主题将成为选择器链中将应用样式的元素。

    示例HTML
    <p><span>lorem</span> ipsum dolor sit amet</p>
    <p>consecteture edipsing elit</p>
    

    这个选择器可以设置span元素的样式

    p span {
        color: red;
    }
    

    这个选择器可以设计p元素的样式

    !p span {
        color: red;
    }
    

    更新的“选择器4级编辑草案”包括“关系伪类:has()

    :has()将允许作者根据其内容选择元素。 我的理解是选择它来提供与jQuery自定义的兼容性:has()伪选择器*。

    无论如何,继续上面的例子,选择包含spanp元素可以使用:

    p:has(span) {
        color: red;
    }
    

    *这让我怀疑jQuery是否已经实现了选择器主题,主题是否保留在规范中。


    为了完整性,我想指出,在选择器4规范(目前在提案中),这将成为可能。 具体来说,我们将获得主题选择器,它将以以下格式使用:

    !div > span { /* style here */
    

    !div选择器指示它是要被设计的元素之前,而不是span 。 不幸的是,截至本文发布时,没有现代浏览器已经将它作为其CSS支持的一部分来实现。 然而,如果你想进一步探索探索的道路,通过称为Sel的JavaScript库支持。


    我同意这是不可能的。

    CSS3可以做的唯一事情(帮助我)是选择没有孩子的元素:

    table td:empty
    {
       background-color: white;
    }
    

    或者有任何孩子(包括文字):

    table td:not(:empty)
    {
       background-color: white;
    }
    
    链接地址: http://www.djcxy.com/p/22817.html

    上一篇: element with a given child

    下一篇: CSS selector for "foo that contains bar"?