Question

在代字号周围带有“空格”的代码段不起作用。

		h3 ~ p {
			color: red;
		}

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title></title>

</head>
<body>
<h3>this does not work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

这个没有空格的片段确实有用。

		h3~p {
			color: red;
		}

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title></title>

</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

撤消将恢复为不工作，而当我在波浪号周围放置“新”空格时，它可以正常工作。

		h3 ~ p {
			color: red;
		}

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title></title>

</head>
<body>
<h3>this does work</h3>
<p>sibling</p>
<p>sibling</p>
<p>sibling</p>
</body>
</html>

由于CSS总体上有能力让我想要撕掉我的头发，如果有人可以帮我避免这些问题会很好。

Answer 1

这是因为你在第一个例子中的波浪号后面有一个不间断的空格。如果您不小心按option+space而不是space，则会显示。

macOS Sierra CSS一般兄弟组合 - 奇怪的行为

1 个答案: