Question

我试图阻止悬停和焦点效果仅在第一行，但当我应用“第一个孩子”伪代码时，它适用于所有行..这是代码：

/* CSS */
ul {list-style-type: none;}
ul > li > a {
    background: transparent;
    font: normal 12px Arial, sans-serif;
    color: #007DBD;
    margin: 0;
    border-radius: 0;
    padding: 7px 10px;
    width:200px;
}

ul > li > a:first-child {
    color:#333;
    background: none;
}

ul > li > a:hover, ul > li > a:focus {
    color: #009BE1;
    background: #F3F3F3;
    text-decoration: none;
}

/* HTML */
<ul>
        <li><a href="javascript:;">sample@test.com</a></li>
        <li><a href="javascript:;">Edit Profile</a></li>
        <li><a href="javascript:;">Logout</a></li>
</ul>

我不希望第一个<li><a>项目有任何悬停效果。
这是js-fiddler：
http://jsfiddle.net/123qyrtc/

如果有任何CSS解决方案，请告诉我......

Answer 1

澄清一下，您不希望第一部分（sample@test.com）具有悬停效果，对吗？你需要定位第一个li，如下所示：

ul > li:first-child > a:hover {
    color:#333;
    background: none;
}

Answer 2

ul > li:first-child > a:hover, ul > li:first-child > a:focus {
    color:#333;
    background: none;
    text-decoration:underline
}

Answer 3

使用:not()伪排除您不想要的内容：

Updated JsFiddle

ul > li:not(:first-child) > a:hover, ul > li > a:focus {
    color: #009BE1;
    background: #F3F3F3;
    text-decoration: none;
}

请记住，在这种情况下，:first-child是<li>，而不是a。 a永远是第一位。

通过css防止悬停效果到第一个元素

3 个答案: