伪选择器在我的情况下不起作用

Question

演示：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;
}

Answer 1

您需要将其更改为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中的冒号和选择器之间缺少空格。 空白非常重要

Answer 2

为什么不试试这个：

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