HTML与CSS关系选择器问题求助：文本未按预期显示橙色

你的代码逻辑本身没问题，#products p 这个后代选择器写法正确，导致文本没变成橙色的核心原因是HTML文件没有引入外部的styles.css样式表，浏览器根本没加载到你写的CSS规则。

解决步骤： #

• 在HTML的<head>标签内添加引入样式表的<link>标签
• 确保styles.css和index.html文件在同一目录下（如果路径不同，调整href的值即可）

修改后的完整index.html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 新增这行引入样式表 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section id="products">
    <p>Lorem ipsum dolor sit.</p>
</section>
</body>
</html>

保存修改后刷新页面，<p>标签内的文本就会显示为橙色了。

内容的提问来源于stack exchange，提问作者ojcodes7