一、为什么Home按钮的蓝色样式没生效？ #

看了你的代码，问题出在选择器的目标元素不对：你给第一个<li>设置了color: blue，但<li>里面的<a>标签已经通过.menu ul li a { color: green; }明确设置了绿色。<a>标签属于替换元素，它的颜色不会继承父元素<li>的样式，而是会优先使用自身的color属性，所以你的蓝色样式被覆盖了。

修复方案：

把选择器改成直接选中第一个<li>里的<a>标签，这样就能精准覆盖原有样式：

/* 替换原来的 .menu ul li:first-child { color: blue; } */
.menu ul li:first-child a { color: blue; }

完整修正后的CSS代码：

nav { display: flex; justify-content: space-between; }
.menu ul { display: flex; }
.menu ul li { list-style: none; padding: 15px 25px; }
.menu ul li a { text-decoration: none; color: green; font-size: 18px; }
/* 修正后的选择器 */
.menu ul li:first-child a { color: blue; }

二、如何用CSS伪类设置列表项样式？ #

CSS伪类能帮你针对列表的位置、交互状态等精准设置样式，下面是几个最常用的场景：

• 按位置选择列表项

  • :first-child / :last-child：选中列表的第一个/最后一个项

    /* 把最后一个列表项（Contact）设为红色 */
    .menu ul li:last-child a { color: red; }
    

  • :nth-child(n)：灵活选中第n个项，n可以是数字、even（偶数）、odd（奇数），或者公式（比如3n+1选中第1、4、7...项）

    /* 偶数位置的列表项加浅灰背景 */
    .menu ul li:nth-child(even) { background-color: #f5f5f5; }
    /* 第3个列表项（About）设为橙色 */
    .menu ul li:nth-child(3) a { color: orange; }
    

• 交互状态样式

  • :hover：鼠标悬停时的样式

    /* 悬停时列表项背景变蓝，文字变白 */
    .menu ul li:hover { background-color: #3399ff; }
    .menu ul li:hover a { color: white; }
    

  • :active：点击元素（按住鼠标期间）的样式

    .menu ul li:active a { color: darkblue; }
    

  • :focus：元素获得焦点（比如用Tab键导航到该链接）时的样式，提升页面可访问性

    .menu ul li a:focus { outline: 2px solid #3399ff; outline-offset: 2px; }
    

• 排除特定项

  • :not()：排除符合条件的元素

    /* 除了第一个列表项，其他都加下划线 */
    .menu ul li:not(:first-child) a { text-decoration: underline; }
    

内容的提问来源于stack exchange，提问作者Mostafa Ferdaous Nayeem