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

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 中的冒号和选择器. 空格很重要