应用CSS除非HTML包含类

除非包含类，否则是否可以将样式应用于某个项目？就拿这个网站，例如：应用CSS除非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？

来源

2013-04-25 Get Off My Lawn

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

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

http://jsfiddle.net/Gt78B/

为否定伪类可悲的支持仅限于IE 9 + http://caniuse.com/css-sel3虽然属性选择器广泛支持

来源

2013-04-25 15:34:25 Adrift

如果这不能解决您的问题 - 由于浏览器兼容性 - 采取丑陋的方式。使用jQuery切换类。 – melancia 2013-04-25 15:36:47

这使用JavaScript来实现一些容易应用的CSS ... – 2013-04-25 15:38:13

oopsies - 我的眼睛看到一个巨大的胖$符号在那里，我去了jquery模式！不要问我为什么 - 猜我只是不够小心。 srry我的坏 – 2013-04-25 15:39:08

只需CSS你shoudl能够做到这一点：

.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; 
}

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

来源

2013-04-25 15:37:23

应用CSS除非HTML包含类

回答

相关问题