“a：active”和“.active a.class”之间的区别

Question

我在css文件中有这个：

#toolbar a.opener:hover,
#toolbar a.opener:active,
#toolbar a.opener:focus {
    something1;
}
#toolbar .active a.opener {
    something2;
}

问题：

1. “第一个活跃”和“第二个活跃”之间有什么区别 活跃的？？
2. 何时被称为“第一个活跃”和“第二个活跃”？

Answer 1

:active指定元素所处的状态。单击元素时:active或通过其他方式获得焦点。

.active指的是一个类名。在这种情况下，CSS规则适用于active父元素中具有#toolbar类的元素。

Answer 2

第一条规则包含＆＃34;伪＆＃34;类，在元素处于某种状态时以元素为目标。 ：active伪选择器在用户点击它时适用于该元素。

后一个规则只是一个类选择器，它适用于具有类＆＃34;开启者＆＃34;的锚元素。并且是具有类＆＃34;活跃＆＃34;。

的元素的后代

Answer 3

第一个:active（冒号问题）指的是浏览器自动设置的active pseudo css class。第二个.active指的是您（或您的程序）需要应用于元素的简单css类。

因此，要回答第二个问题，只要用户点击（激活）您网页上的链接，第一个问题就会由浏览器自动应用，而第二个问题永远不会自动应用。

Answer 4

#toolbar a.opener:hover,
#toolbar a.opener:active,
#toolbar a.opener:focus {
    something1;
}

适用于

<div id="toolbar">
  <a class="opener"></a>
</div>

处于悬停，活动或焦点状态时。而

#toolbar .active a.opener {
    something2;
}

适用于

<div id="toolbar"> 
  <div class="active">  
    <a class="opener"></a> 
  </div>  
 </div>

Answer 5

这些是:pseudo州：

#toolbar a.opener:hover,
#toolbar a.opener:active,
#toolbar a.opener:focus {
    something1;
}

此.active是已添加到a.opener的父级的类：

#toolbar .active a.opener {
    something2;
}

Answer 6

active 是按下和释放鼠标按钮的状态。

阅读，

• :active selector documentation
• Another article