为何HTML示例中列表项“a”的颜色无法修改？

你的核心问题是HTML文件未引入CSS代码——浏览器无法识别你单独写的CSS规则，因为两者没有建立关联，所以.color类的红色样式自然不会生效。以下是两种可行的解决方式：

• 方法一：使用内部样式表
  在HTML的<head>标签内添加<style>标签，将CSS代码嵌入其中：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Adding CSS</title>
    <style>
      h1 {color: green;}
      .color {
          color: red;
      }
    </style>
  </head>
  <body>
    <h1>Three Methods of Adding CSS</h1>
    <a href="./inline.html">Inline</a>
    <a href="./internal.html">Internal</a>
    <a href="./external.html">external</a>
  
    <ol>
      <li class="color">a</li>
      <li>b</li>
    </ol>
  </body>
  </html>
  

• 方法二：使用外部样式表
  假设你的CSS文件名为style.css且与HTML文件在同一目录下，在HTML的<head>中添加<link>标签引入外部CSS文件：

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Adding CSS</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <!-- 其余HTML内容不变 -->
  </body>
  </html>
  

小提示：如果使用外部样式表，务必确认CSS文件的路径与<link>标签中href属性的路径一致，否则浏览器仍无法加载样式。

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