Question

<!DOCTYPE html>
<html>
    <head>
        <title>my test code</title>
        <style>
            #h1id {color: blue;}
            h1:active {color: red;}
            h3:hover {color: red;}
            .h3class {color: blue;}
        </style>
    </head>
    <body>
        <h1 id="h1id">id test</h1>
        <h3 class="h3class">class test</h3>
    </body>
</html>

在此代码中

h3选择器有效，但h1选择器无效。

为什么h1选择器不起作用？（h1：active {颜色：红色；}）

更多问题。

----添加我的代码----

1。

<!DOCTYPE html>
<html>
    <head>
        <title>my test code</title>
        <style>
            #atag {color: red;}
            a:hover {color: blue;}
        </style>
    </head>
    <body>
        <a href="http://www.google.com" id="atag">a tag test</a>
    </body>
</html>

2.
<style>
  a {color: red;}
  #atag:hover {color: blue;}
</style>

3.
<style>
  a {color: red;}
  a:hover {color: blue;}
</style>

4.
<style>
  #atag {color: red;}
  #atag:hover {color: blue;}
</style>

2、3、4在Chrome浏览器中效果很好

1不起作用。

伪类：hover或：active

请让我知道原因。

Answer 1

简短的回答，因为<h1>元素本身永远不会处于活动状态，所以它不起作用。

长答案，直接引自https://developer.mozilla.org/en-US/docs/Web/CSS/:active

：active CSS伪类表示用户正在激活的元素（例如按钮）。使用鼠标时，通常会在用户按下鼠标主键时开始“激活”。

/ *选择任何正在激活的<a> * /

a：active { 红色; }

：active伪类通常用于<a>和<button>元素上。该伪类的其他常见目标包括包含已激活元素的元素，以及通过其关联的<label>被激活的元素。

为什么HTML5，CSS3中的ID选择器无法与标签选择器一起使用

1 个答案: