Question

我在CSS中有以下代码：

a{
    margin: 10px;
    padding: 10px;
    background-color: black;
    color: white;
    font-family: Cambria;
    text-decoration: none;
}

a:hover {
    background-color: grey;
}

你看，这里的代码运行正常。实现了在悬停时我的链接变为灰色的期望结果。这里的问题是想知道当我在a和/或:hover之间添加空格时代码停止将background-color属性更改为灰色的原因。

以下是我的HTML代码仅供参考

<!DOCTYPE html>
<html>
    <head>
        <title>Crescive</title>
        <link rel="stylesheet" href="./style.css" />
        <meta charset="utf-8>
    </head>

    <body>
       <main> <!-- I want people to click this -->
           <header>
               <h1>Crescive</h1>
               <p>A customs forms service!</p>
               <a href="./create.html">Try it out!</a>
           </header>
       </main>
    </body>
</html>

PS旁注，如果有人能告诉我我是否正在好好利用切片标签，那将非常感激！

Answer 1

因为如果在a和:hover之间放置一个空格，它就不再与链接匹配，但它正在寻找其中的悬停元素。

示例：https://jsfiddle.net/ze2g56v4/

具有增加空间的选择器等于：

a *:hover {
    ...
}

Answer 2

：鼠标悬停选择器用于在鼠标悬停时选择元素。参考https://www.w3schools.com/cssref/sel_hover.asp

在＆＃39; a＆＃39;之间留一个空格。并且＆＃39;：悬停＆＃39;意味着＆＃39; a＆＃39;所有悬停的后代（不仅仅是儿童元素）。 element（不是它自己）将采用定义的样式。

Answer 3

:hover被称为Pseudo类。

伪类表示元素的状态，还有其他像:active, :focus, :after, :before等。

他们需要在没有空格的CSS选择器旁边才能工作，因为它再次引用了元素的状态

例如

a:hover说：锚点的悬停状态

为什么在此代码中放置空格会影响CSS中的输出？

3 个答案: