CSS选择器（如果不为null）+嵌套

Question

I am searching for something like

.class[height!= "0"] .span

Every time i try to nest something like

div.item.class[height="0"] it didn't work.

Maybe someone can help me? :)

Here is more Code:

HTML

<div class="barWrapper">
                                        <ul id ="tabs" class="nav-bar" data-tabs="tabs">
                                            <li class="speed" style="height: 0%;"><a href="#Riesenslalom" data-toggle="tab"><span></span></a></li>
                                            <li class="speed" style="height: 0%;"><a href="#Speed" data-toggle="tab"><span></span></a></li>
                                            <li class="mixrace act" style="height: 100%;"><a href="#Mix_Race" data-toggle="tab"><span></span></a><em>1056</em></li>
                                            <li class="mixrace act" style="height: 5%"><a href="#Freeride" data-toggle="tab"><span></span></a><em>5</em></li>
                                            <li class="mixrace act" style="height: 70%"><a href="#Foto_Rallye" data-toggle="tab"><span></span></a><em>539</em></li>
                                            <li class="mixrace act" style="height: 10%"><a href="#Slalom" data-toggle="tab"><span></span></a><em>20</em></li>
                                            <li class="speed" style="height: 0%"><a href="#Buckelpiste" data-toggle="tab"><span></span></a></li>
                                            <li class="speed" style="height: 0%;"><a href="#Flug" data-toggle="tab"><span></span></a></li>
                                            <li class="mixrace act" style="height: 90%"><a href="#Carving" data-toggle="tab"><span></span></a><em>800</em></li>
                                            <li class="mixrace act" style="height: 100%"><a href="#Wandern" data-toggle="tab"><span></span></a><em>1200</em></li>
                                            <li id="line"></li>
                                        </ul>   
                                    </div>

CSS

div.item.topStatistic .topStatistic-content .first .left .statisticWrapper .barWrapper ul > li span{position:absolute; bottom:0; width: 100%; height:40px; text-align: center; }
div.item.topStatistic .topStatistic-content .first .left .statisticWrapper .barWrapper ul > .speed span{background: url("icon_statistic_Speed.png") no-repeat transparent;}
div.item.topStatistic .topStatistic-content .first .left .statisticWrapper .barWrapper ul > .mixrace:not([height=0]) span{background: url("icon_statistic_active_MixRace.png") no-repeat transparent;}

Answer 1

Css has :not() as a pseudo selector. So .class:not([height=0]) should work. http://caniuse.com/#search=:not

Answer 2

您可以使用伪元素，它将为您工作，但问题是，它仅适用于主流浏览器，而不适用于ie8和blow

:not()