伪选择不会在我的情况下工作

演示在这里：http://jsfiddle.net/BLZfd/伪选择不会在我的情况下工作

<div class=" icon_col"> <a href="#"> 
       <div class="someclass"> 
        <span class="someclass again"></span> 
       </div> 
       <p>test</p> 
       </a> 

</div>

我这样做

.icon_col > p: hover { 
    text - decoration: none; 
}

来源

2013-12-16 user3057928

你的款没有任何文本修饰;下划线来自包裹它的锚。 – j08691

固定小提琴：http://jsfiddle.net/BLZfd/11/（也是你的CSS在Javascript部分） – AeroX

您需要将其更改为a:hover在于文本装饰是一个原因默认样式的a而不链接p元素。

.icon_col > a:hover { 
    text-decoration: none; 
}

您还在我的代码中删除了一些冗余空间。

Updated fiddle

另外值得一提的是，>选择的意思是“嫡系”，这样即使您的间距是正确的这一规则止跌”（选择，结肠，和伪选择器之间没有空格）由于<p>标记不是.icon_col的直接后代，因此它与任何内容匹配，因此它是嵌套在<a>标记内的次要后代。

如果你真的希望指向<p>标签，您可以使用此代码：

.icon_col > a:hover p { 
    text-decoration: none; 
}

注意缺少的仪表板和中选择text-decoration字之间的空间，以及结肠和选择器a:hover。 空白是非常重要的

来源

2013-12-16 15:47:38 SW4

为什么不试试这个：

.icon_col > a: hover { 
    text - decoration: none; 
}

来源

2013-12-16 15:48:45 Yax

伪选择不会在我的情况下工作

回答

相关问题