为什么之前在CSS中设置颜色失败？

/* 错误的选择器 */
p {
  color: red;
}

/* 正确的选择器 */
.my-class {
  color: red;
}

/* 内联样式优先级最高 */
<p style="color: blue;">This is blue.</p>

/* ID选择器优先级次之 */
#my-id {
  color: green;
}

/* 类选择器优先级最低 */
.my-class {
  color: red;
}

/* 父元素没有设置颜色 */
.parent {
  /* 没有 color 属性 */
}

.child {
  color: red; /* 可能会被覆盖 */
}

<link rel="stylesheet" href="styles.css">

/* 错误的语法 */
p {
  color red;
}

/* 正确的语法 */
p {
  color: red;
}

/* styles1.css */
p {
  color: blue;
}

/* styles2.css */
p {
  color: red; /* 覆盖了 styles1.css 中的颜色 */
}

/* 错误的Sass代码 */
p {
  color: red
}

/* 正确的Sass代码 */
p {
  color: red;
}

document.querySelector('p').style.color = 'blue';

/* Bootstrap 可能会覆盖你的颜色 */
.btn {
  color: white;
}