CSS3:显示/隐藏图标

Question

我有这个代码显示/隐藏图标使用css悬停:

HTML:

<li>
   <span class="tools"><a href="javascript:void()"><i alt="Delete" title="Delete" class="icon-remove-sign" onclick=deleteBox("1")></i></a></span>
</li>

CSS:

.box .todo-list > li> a> .tools {
  display: none;
  float: right;
  color: #f56954;
}
.box .todo-list > li> a:hover .tools {
  display: inline-block;
}

现在这不是工作和不隐藏我的图标。如果我从代码中删除> a>，这工作和隐藏，但当添加a>不工作。我怎样才能解决这个问题?

Answer 1

你的CSS选择器有一点错误，试试:

.box .todo-list > li > .tools > a

和

.box .todo-list > li > .tools > a:hover 

选择器部分需要按照它们所选择的元素嵌套在HTML中的顺序排列。

查看W3C选择器文档了解更多详细信息。

Answer 2

>选择器表示直系后代。

在您的标记中，li的直接后代是span.tools。

因此，li > a不选择任何东西

但是，li > .tools > a 会选择a元素。

可以在这里找到一个很好的说明:Child和Sibling选择器

Answer 3

上面的>选择器是子选择器。这意味着它将只选择父元素的直接子元素。换句话说，它只查看标记结构的下一层，而不是更深。

.box .todo-list > li > .tools > a