Question

是否可以将样式应用于项目，除非它包含一个类？以这个html为例：

<div class="nav">
    <ul>
        <li><span class="selected">Page 1</span></li>
        <li><span>Page 2</span></li>
        <li><span>Page 3</span></li>
        <li><span>Page 4</span></li>
    </ul>
</div>

我目前有这个CSS：

.nav li span{
    display: block;
    padding: 5px 0 5px 20px;
    cursor: pointer;
    border: solid 1px transparent;
    border-right: 0;
    border-left: 0;
    color: #777;
}
.nav li span.selected, .nav li:hover span{
    background-color: #deeaf4;
    border: solid 1px #2392F3;
    border-right: 0;
    border-left: 0;
    color: #000000;
}
.nav li:hover span{
    border: solid 1px transparent;
    border-right: 0;
    border-left: 0;
}

当我将鼠标悬停在其中一个跨度上时，如何应用第二个CSS块 UNLESS 它包含类selected？

Answer 1

是的，一种方法是利用not()伪类和属性选择器，例如。

span:not([class=selected]) {
/* Quotes around the value are optional */
color: slategray;
}

http://jsfiddle.net/Gt78B/

遗憾的是，对于否定伪类的支持仅限于IE 9 + http://caniuse.com/css-sel3，尽管属性选择器得到广泛支持

Answer 2

只需要css就可以做到这一点：

.nav li span.selected,
.nav li span.selected:hover,
.nav li:hover span{
    background-color: #deeaf4;
    border: solid 1px #2392F3;
    border-right: 0;
    border-left: 0;
    color: #000000;
}

这应该使您的选择器更具体，并忽略边框颜色变化。

除非html包含类，否则应用CSS

2 个答案: