这是一个很漂亮的我想解决的异常问题。
这是关于访问CSS中的特定html标记。所以这是html文件中的场景
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="MyCssCode.css"/>
</head>
<body>
<p>
Some Text!
<h1>Even More Text!</h1> <!-- what i want to access -->
</p>
<h1> Lorem Ipsum Dolor Sit Amet.</h1>
</body>
</html>
现在问题来了，当在CSS中时，我想将规则专门应用于h1标记内的p。而不影响下面的另一个h1（在p标签之外）。我曾尝试使用+和>之类的选择器，但是在此网上证明中找不到真正的答案。
您无法实现此目标，因为h1标签不能位于p内。
如果您将p替换为div，则效果很好：
div h1 {
color: tomato;
}<html>
<head>
<link rel="stylesheet" href="MyCssCode.css" />
</head>
<body>
<div>
Some Text!
<h1>Even More Text!</h1>
<!-- what i want to access -->
</div>
<h1> Lorem Ipsum Dolor Sit Amet.</h1>
</body>
</html>,
问题是因为不适当地将h1标签放在p标签内，如果您在浏览器控制台中查看，则会看到代码损坏。
您可以像这样使用div标签来代替p标签
<html >
<body>
<div>
Some Text!
<h1>Even More Text!</h1> <!-- what i want to access -->
</div>
<h1> Lorem Ipsum Dolor Sit Amet.</h1>
</body>
然后您可以应用这样的样式
div h1{/* all h1 tag inside div*/}
div+h1{/* the h1 next to div*/}
div>h1{ /* h1 tags direct child of a div*/}