Question

在我的页面中，我有一个超链接列表，其设置如下;

<div id="links">
<ul>
<li><a href= "#"> | CONTACT US | </a> </li> &nbsp;
<li><a href= "#">ABOUT |</a></li> &nbsp;
<li><a href= "#">NEWS |</a></li>&nbsp;
<li><a href= "#">  NEWSLETTER SIGNUP |</a></li> &nbsp;
</ul>

我想要做的是更改仅设置“简报注册”链接的颜色的方式。我的Css设置如下;

#links ul
{
list-style-type: none;
text-align: center;
}
#links ul li
{
 display: inline;
}
        #links ul li a
    {
    text-decoration: none;
    color: white;
    display: inline-block;
    height: 5%;

    }

#links a:hover
{

 background-color: #04a4cc;
}

到目前为止，我只能更改所有超链接的颜色设置。我还尝试将类分配给“newsletter signup”列表项，如下所示， NEWSLETTER SIGNUP | 并改变班级的CSS，但我甚至无法让它工作。

Answer 1

如果“简报注册”总是最后一次，您可以这样做：

#links ul li:last-child { background-color: "whatever"; }

或者你应该创建一个类并在css中使用它

Answer 2

由于您想要更改链接的颜色，请尝试以下方法：

 #links ul li:last-child a {
   color: black;
 }

#links ul li:last-child a:hover {
   color: red;
}

Answer 3

尝试使用这些：

#links ul li:nth-of-type(1)
{
 //First Element
}

所以对于时事通讯＆amp;注册您需要：

 #links ul li:nth-of-type(4)
{
 color:red;
}

Answer 4

试试这段代码

<div id="links">
<ul>
<li><a href= "#"> | CONTACT US | </a> </li> &nbsp;
<li><a href= "#">ABOUT |</a></li> &nbsp;
<li><a href= "#">NEWS |</a></li>&nbsp;
<li><a href= "#">  NEWSLETTER SIGNUP |</a></li> &nbsp;
</ul>

#links ul
{
list-style-type: none;
text-align: center;
}
#links ul li
{
 display: inline;
}
        #links ul li a
    {
    text-decoration: none;
    color: green;
    display: inline-block;
    height: 5%;

    }

 #links ul li:last-child a {
   color: green;
 }

#links ul li:nth-child(4) a:hover {
   color: red;
  background: #000;
}
#links a:hover
{
 color: black;
 background-color: #04a4cc;
}

CODEPEN

更改单个列表项的颜色

4 个答案: