Question

css中.head nav > a.active:hover是什么意思？

Answer 1

<style>
.head nav > a.active:hover {color:red}
</style>
<div class=head>
   <nav>
      <a class=active href="#">把鼠标移到这里文字会变红</a>
      <a class=active href="#">这个也是</a>
      <a href="#">这个不会变色，因为它不是active类</a>
      <div>
         <a class=active href="#">这个也不会变色，因为它不是nav的儿子（是孙子）</a>
      </div>
   </nav>
</div>

补充说明：> 是子选择器，空格则是后代选择器（儿子与后代的区别总该知道吧？）

追问

我知道。但其中的.active我不懂，因为html定义的是class="nav-picture active"。所以请问css为什么可以这样写

追答

所谓类（class），就是类别，现实生活中每种事物都可以有不同的分类，比如你是男的，是个大学生，也是共青团员，那么就可以这样来表示 class="男 大学生 共青团员"，也就是说你同时具有这三种属性。同理，class="nav-picture active"表示这个网页元素同时具有nav-picture类和active类的属性，分别设置或修改这两种类的属性值，最终都会反映到这个元素中。

追问

万分感谢。

万分感谢。