如何将HTML菜单项字体颜色修改为黑色

<h2>如何将HTML菜单项字体颜色修改为黑色</h2>
<p>您想将网页菜单项的字体颜色更改为黑色？以下是用CSS实现这一目标的简单方法，以及代码示例和详细说明。</p>
<p><strong>问题：</strong> 如何将HTML菜单项的字体颜色更改为黑色？</p>
<p><strong>解决方案：</strong></p>
<p>您可以通过在CSS中添加几行代码轻松实现。以下代码片段演示了如何将菜单项的字体颜色设置为黑色：html<template>  <view>    <!-- 顶部导航栏 -->    <view class='af-head'>      <span class='af-head-msg' style='font-size: 60rpx;'>&lt;</span>      <span class='af-head-msg af-head-fuc'>全部功能</span>    </view></p>
<pre><code>&lt;!-- 左侧导航栏 --&gt;    &lt;view class='sidebar'&gt;      &lt;ul&gt;        &lt;li @click='navigateToPage('Page1')'&gt;菜单项1&lt;/li&gt;        &lt;li @click='navigateToPage('Page2')'&gt;菜单项2&lt;/li&gt;        &lt;li @click='navigateToPage('Page3')'&gt;菜单项3&lt;/li&gt;      &lt;/ul&gt;    &lt;/view&gt;  &lt;/view&gt;&lt;/template&gt;
</code></pre>
<script>export default {  data() {    return {};  },  methods: {    navigateToPage(page) {      // 根据菜单项点击事件进行页面跳转或其他操作      console.log('点击了' + page);    }  }};</script>
<style>.af-head {  position: relative;  background-color: #629ffc;  height: 100rpx;  display: flex;  justify-content: center;  font-size: 44rpx;  font-weight: 500;  font-family: sans-serif;}

.af-head-msg {  position: absolute;  bottom: 16rpx;  color: white;  left: 38rpx;}

.af-head-fuc {  text-align: center;  left: 300rpx;}

.sidebar {  width: 100px;  background-color: white;  height: 100vh;  padding-top: 100rpx;}

.sidebar ul {  list-style: none;  padding: 0;  margin: 0;}

.sidebar li {  padding: 10rpx;  color: black; /* 修改菜单项字体颜色为黑色 */  /* 去掉点 */  list-style-type: none;}</style>
<p><strong>代码说明:</strong></p>
<ol>
<li><strong>选择菜单项:</strong>  <code>.sidebar li</code> 选择器定位到侧边栏内的所有菜单项。2. <strong>设置字体颜色:</strong>  <code>color: black;</code> 将菜单项的字体颜色设置为黑色。</li>
</ol>
<p><strong>注意:</strong> 您可以根据需要修改颜色值。例如，可以使用十六进制颜色代码 (#000000) 或 RGB 值 (rgb(0, 0, 0)) 来表示黑色。</p>
<p>通过以上简单步骤，您就可以轻松地将HTML菜单项的字体颜色修改为黑色，并根据您的设计需求进行调整。</p>