为什么有时伪 class 是 a:active 而有时是 a.active？

Question

我看到在某些模板中 a:active 伪 class 被写成 a.active（用点而不是冒号...它是 class 吗？为什么有人会伪造一个 class 吗？...这真的是一个好习惯吗？如果这个问题对你来说太简单了，我很抱歉，只是我读过的文献没有给出具体的答案我知道的问题...谢谢，

Answer 1

a.active 不是伪class。它只是应用于元素的 class active。当某些元素处于活动状态时，有人可能会添加 class，并且它不必与 :active pseudoclass.

类似

Active 是一个很常见的术语，它可能代表任何意思。它与处于 'active' 状态的 link 完全没有关系。

在某些情况下它们是相关的，但有人可能会添加一个 class，因为伪 class 不适合这个目的。

例如，当一个元素被悬停时，人们可能想显示一些东西（比如提示），但当它被取消悬停时不立即隐藏它。因此，要做到这一点，可以在元素悬停时添加一个 class，并设置一个计时器在元素未悬停时将其删除，这样会有一个小的延迟。

你在文献中找不到这个的原因是因为它们本质上是不相关的。

根据要求，我添加了一个小片段，展示了伪class 的简单性和添加您自己的 classes 的灵活性。

$(function(){
  // NONJS: Set a class from Javascript, so you can add different styling based on having JS or not.
  $('body').removeClass('nonjs').addClass('js');
  
  // The actual hover code for delayed hovering.
  $('.text.delayed').hover(
    
    // When hovered, add the class.
    function (){ $(this).addClass('hovered'); },
    
    // When unhovered, remove the class after a little time.
    function (){ 
       var element = this; 
       setTimeout(function(){
           $(element).removeClass('hovered');
         }, 2000);
    }
    
  );
});

.text {
  position: relative;
}

.hint {
  display: none;
  position: absolute;
  background-color: yellow;
  top: 10px;
  left: 10px;
}

/* Simple hints are just shown on hover, hidden when unhovered. */
.simple:hover .hint,
/* delayed hints are shown as long as they have the hovered class. */
.js .delayed.hovered .hint,
/* NONJS: Fallback for non-javascript situation, make delayed hint behave like simple hint using pure CSS. */
.nonjs .delayed:hover .hint
{
  display: inline-block;
}

<body class='nonjs'>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="text simple">Simple. Hover for more information
  <div class="hint">This is a simple hint which disappears immediately when unhovered.</div>
</div>

<div class="text delayed">Delayed. Hover for more information
  <div class="hint">This is a delayed hint which will remain visible for 2 seconds and is then hidden using Javascript.</div>
</div>
  
</body>

为什么有时伪 class 是 a:active 而有时是 a.active？

Why does sometimes the pseudo class is a:active and sometimes a.active?

pseudo-class