CSS新手求助：如何为<li>及内部<a>设置不同颜色？

1. 为

和内部设置不同颜色 #

你之前用li.a选择器没效果，是因为这个选择器的意思是选择带有a类的<li>标签，而不是<li>内部的<a>。正确的写法是用后代选择器：li a（中间加空格），表示选中所有<li>内部的<a>元素。

建议把你行内的style="text-decoration: none"移到外部CSS里统一维护，再按需求设置颜色：

/* 给.body_introduction下的所有li设置颜色 */
.body_introduction ul li {
  color: #333; /* 替换成你需要的li文本颜色 */
}

/* 给li内部的a标签设置另一种颜色 */
.body_introduction ul li a {
  color: #0066cc; /* 替换成你需要的链接颜色 */
  text-decoration: none; /* 统一去掉下划线 */
}

2. 给大量不同区块的

设置不同颜色 #

当页面存在大量<p>标签时，核心是通过类名或父元素区分不同区块的p，两种常用方法：

方法一：给

直接加自定义类名 #

给需要特殊样式的<p>添加类，比如：

<p class="intro-paragraph">这是介绍区域的段落</p>
<p class="contact-paragraph">这是联系区域的段落</p>

然后在CSS中针对类设置样式：

.intro-paragraph {
  color: #666;
}
.contact-paragraph {
  color: #222;
}

方法二：通过父容器的类区分 #

如果某个区块下的所有<p>样式统一，给父容器加类，用后代选择器控制：

<div class="intro-section">
  <p>介绍区段落1</p>
  <p>介绍区段落2</p>
</div>
<div class="contact-section">
  <p>联系区段落1</p>
  <p>联系区段落2</p>
</div>

对应的CSS：

.intro-section p {
  color: #666;
}
.contact-section p {
  color: #222;
}

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