为什么在这段代码中放一个空格会影响CSS的输出？
为什么在这段代码中放一个空格会影响CSS的输出？
提问于 2018-06-11 04:34:02
我用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>顺便说一句，如果有人能告诉我我是否很好地利用了分段标记，我将不胜感激！
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-11 04:38:43
因为如果在a和:hover之间放置一个空格，它将不再与链接匹配，但它会在其中查找悬停的元素。
示例：https://jsfiddle.net/ze2g56v4/
添加了空格的选择器等于：
a *:hover {
...
}Stack Overflow用户
发布于 2018-06-11 04:53:33
：鼠标悬停选择器用于在将鼠标悬停在图元上时选择图元。参考https://www.w3schools.com/cssref/sel_hover.asp
在'a‘和':hover’之间加一个空格意味着'a‘元素(而不是其本身)的所有悬停的后代(不仅仅是子元素)将采用定义的样式。
Stack Overflow用户
发布于 2018-06-11 04:38:27
:hover被称为Pseudo类。
伪类表示元素的状态，还有一些额外的类，比如:active, :focus, :after, :before等等。
它们需要在CSS选择器旁边不留空格才能工作，因为它再次引用了元素的状态
示例
a:hover在锚点的悬停状态上说：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50787802
复制相关文章
相似问题
腾讯云开发者
