html - 如果父级有带有 CSS 的子级,则将样式应用于父级

标签 html css

<分区>

如果 parentchild 元素,我正在尝试将 styles 应用到它。

到目前为止,我已经将样式应用于 child 元素(如果存在)。但是如果 parentchild,我想 style parent,只使用 CSS.

以下是html

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

css代码

* {
    margin:0;
    padding:0;
    text-decoration:none;
}
.main li {
    display:inline-block;
    background:yellow;
    color:green;
}
.main > li > ul > li {
    background:orange
}
.main > li > ul > li > ul >li {
    background:pink;
}

工作 FIDDLE

最佳答案

这在 CSS3 中是不可能的。有一个提议的 CSS4 选择器 $ 可以做到这一点,它看起来像这样(选择 li 元素):

ul $li ul.sub { ... }

参见 list of CSS4 Selectors here .

作为替代方案,对于 jQuery,您可以使用的单行代码如下:

$('ul li:has(ul.sub)').addClass('has_sub');

然后您可以继续在 CSS 中设置 li.has_sub 的样式。

关于html - 如果父级有带有 CSS 的子级,则将样式应用于父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21252551/

相关文章:

html - 未应用 CSS 样式 : Head First HTML Example

c# - Html Agility Pack 从 div 获取特定内容

javascript - 单击按钮时的进度条

javascript - 试图找到一个简单/优雅的js/jquery解决方案来控制用户图像定位、旋转和缩放

css - 将所有字母大写,第一个大写

html - div 中的边距无法正常工作

css - 奇怪的 Div 填充

c# - .cs 页面上的 html 按钮

html - Visual Studio 2013 中的自定义字体

html - 如何将文本与中心对齐或接近中心?