我用CSS编写了以下代码:
a{
margin: 10px;
padding: 10px;
background-color: black;
color: white;
font-family: Cambria;
text-decoration: none;
}
a:hover {
background-color: grey;
}
您看,这里的代码运行得很好。我的链接在悬停时变成灰色的预期结果实现了。这里的问题是,当我在a
和/或:hover
之间添加一个空格时,为什么代码会停下来将背景颜色属性更改为灰色。
以下是我的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>
顺便说一句,如果有人能告诉我我是否很好地利用了分段标记,我将不胜感激!
发布于 2018-06-11 04:38:43
因为如果在a
和:hover
之间放置一个空格,它将不再与链接匹配,但它会在其中查找悬停的元素。
示例:https://jsfiddle.net/ze2g56v4/
添加了空格的选择器等于:
a *:hover {
...
}
发布于 2018-06-11 04:53:33
:鼠标悬停选择器用于在将鼠标悬停在图元上时选择图元。参考https://www.w3schools.com/cssref/sel_hover.asp
在'a‘和':hover’之间加一个空格意味着'a‘元素(而不是其本身)的所有悬停的后代(不仅仅是子元素)将采用定义的样式。
发布于 2018-06-11 04:38:27
:hover
被称为Pseudo
类。
伪类表示元素的状态,还有一些额外的类,比如:active, :focus, :after, :before
等等。
它们需要在CSS选择器旁边不留空格才能工作,因为它再次引用了元素的状态
示例
a:hover
在锚点的悬停状态上说:
https://stackoverflow.com/questions/50787802
复制相似问题