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

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 块，除非它包含类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;
}

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