更改最左侧菜单项的样式

Question

这是我的Codepen演示，我希望在链接下方显示图像捕捉：

Codepen Demo

对齐：

我用过这个css：

.menu > ul > li:first-child {
      color: red !important;
}

最左侧链接Red但仍显示Grey行。

实际上看起来应该是这样的：

问题2：

警告框上方的行长度应跨越页面的整个宽度。怎么做？

我试着用chaging：

.menu > ul {    
    display: block;    
    list-style: none;    
    border-bottom: 0.1em solid #9e9e9e;
    width: 152%;  // makig it 200% increase width of entire page. Rather I want to increase the width of lie only
    margin-left: -2%;

}

Answer 1

试试这个

.menu > ul > li:first-child a {

  color: red !important;
}

DEMO

Answer 2

您的代码很好，唯一的问题是a被超链接的实际属性的颜色覆盖为

a {
  // properties..
}

将代码更改为：

.menu > ul > li:first-child a {
  color: red !important;
}

这会将设置应用于带有类菜单的元素中未排序列表下最左侧列表项的超链接！ ：）

Answer 3

您忘记在以下位置添加锚点选择器：

.menu > ul > li:first-child a {
   color: red !important;
}