使用伪类将类添加到父 li答案

【问题标题】：Using pseudo-classes add class to parent li使用伪类将类添加到父 li
【发布时间】：2014-02-14 00:48:28
【问题描述】：

有没有办法使用css伪类来做到这一点：我需要将子span（高）的类名添加到父li？

谢谢

<li class="emergency" style="background-color: #FE9D9D;">
<span class="high">250</span></li>

【问题讨论】：

不是真的，但我相信有一天我们会到达那里，然后再等几年让它成为标准
不，没有办法用 css 做到这一点，只有你需要 jQuery！
<li class="emergency high">...
你不能把.high的CSS样式添加到li.emergency吗？

标签： css css-selectors pseudo-class

【解决方案1】：

你不能用 CSS 做到这一点。

但是你可以使用 JQuery。

$(document).ready(function () {

    $('li.emergency').each(function () {
        var newClass = $(this).find('span').attr('class');
        $(this).addClass(newClass);
    });

});

Demo

或者您可以设置跨度的背景颜色。 display: block; 将使跨度全宽。

HTML

<ul>
    <li class="emergency">
        <span class="high">250</span>
    </li>    
    <li class="emergency">
        <span class="low">100</span>
    </li>   
</ul>

CSS

span {
    display: block;    
}
span.high {
    background: red;    
}
span.low {
    background: green;
}

Demo

【讨论】：

好吧，您正在添加课程，但从父母到孩子，而 OP 要求相反
我正在循环遍历<li>s 并获取子<span> 类，然后将其应用于<li>。
谢谢，但不会。我忘了提，
块是在后端动态生成的。这就是为什么我想使用一个伪类，以便它适用于在 DOM 中呈现的代码。 *****是的，我会尝试 jQueryuery 方法..

所以你只需要将我的函数包装在$(document).ready() 中。我会更新我的答案。

你不能将你想要的样式应用到紧急类吗？