CSS第一个孩子悬停在一个元素上

Question

我试图让 div 中的第一个 a:hover 具有不同的右边距，但我在这个论坛上找到的解决方案似乎都没有被浏览器识别（我使用的是 Chrome版本 45.0.2454.93 m)。

html:

 <div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

CSS：

a:hover {
    margin: 0px -1px;
}

#example:first-child:hover {
    margin-left: 0px;
}

这被完全忽略了，只是在悬停时使用 a:hover 边距。

完整源代码如下：

HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>removed</title>
        <link href="css/main.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="container">
            <div id="heading">
                <h2>HOME</h2>
                <hr>
                <h3>removed</h3>
            </div>

            <img src="images/css_dev_smaller.png" alt="" width="5472" height="3648" id="image_main" />
        </div>
        <div id="nagivation">
            <a href="index.html">Home</a> | <a href="removed.html">removed</a> | <a href="removed.html">removed</a>
        </div>
    </body>  
</html>

CSS：

@charset "utf-8";
html,body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    height: 100%;
    width: 100%;
    background: #fff;
}

h2,h3 {
    font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
    font-weight: 100;
    padding: 0px;
}

h2 {
    margin-bottom: -14px;
    margin-top: 40px;

}

h3 {    
    margin-top: -5px;
    margin-bottom: 55px;
}

hr {
    width: 100%;
    border-color: #bdbbc2;
    border-width: 1px 0px 0px 0px;
    height: 1px;
}

#container {
    display: inline-block;
    text-align: center;
    display: block;
    margin: 0 auto;
    min-width: 51%;     
    padding-top: 10%;
}

#heading {
    display: inline-block;
    width: 15%; 
    min-width: 200px;
    padding-right: 10px;
    vertical-align: top;
    text-align: left;
}

#image_main {
    display: inline-block;      
    width: 35%;
    min-width: 250px;
    height: auto;
    margin: 0px auto;   
    padding: 0px;
}

#nagivation {
    margin: 50px auto;
    text-align: center;
}

a:link, a:visited {
    font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
    text-decoration: none;
    color: #000000;
}

a:hover {
    font-weight: 600;
    margin: 0px -1px;
}

#navigation a:first-child:hover {
    margin: 0px -1px 0px 0px;
    color: #B72C2F;  /* TESTING */
    font-size: 20px; /* TESTING */
}

Answer 1

选择器#example:first-child 表示具有 id 'example' 的第一个子节点，如果您想要第一个锚子节点，则需要 #example a:first-child 代替

您可以执行以下操作：

a:hover {
    margin: 0px -1px;
}

#example a:first-child:hover {
    margin: 0px; /* applies to left and right as well as top and bottom margins */
}

<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

这将防止悬停的第一个孩子的边距发生变化。

这在技术上是您所要求的，但我怀疑不是您想要的，因为您仍在操纵 Link 2 和 Link 3 上的边距，因此将它们悬停会导致抖动。

您的评论说“基本上，当我悬停时，字体粗细会增加。因此，通过将每一侧的边距设置为 -1px，它可以防止相邻链接在悬停时移动一点。” - 这是一个坏主意。不同的浏览器和操作系统会以不同的方式呈现粗体字体，1px 永远不会正确。

没有简单的解决方案，但有几个解决方法：

1. 悬停时不要更改字体粗细，请改用下划线或颜色更改。
2. 使所有链接都具有固定宽度（因此它们不依赖于其内容宽度，如下所示：

#example a {
    display: inline-block;
    width: 100px;
}

#example a:hover {
    font-weight: bold;
}

<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

谷歌搜索“css hover bold”给了我这个，这可能对你有用：Inline elements shifting when made bold on hover

Answer 2

应该是：

#example a:first-child:hover {
    margin-right: 0px;
}

按照您的编写方式，它会选择#example 的第一个实例（如果它是第一个孩子）并将CSS 添加到其中。

编辑： 正如您在此 JSFiddle 中看到的那样，它有效 - 我添加了 color:red; 以显示更多信息。

其余的链接“移动”，因为链接的两边在悬停时都有-1px的边距，可以这样固定：

a:hover {
    margin: 0 0 0 -1px;
}

Answer 3

试试这个。选择'a:first-child'

a:hover {
    color: red;
}

#example a:first-child:hover {
    color: black;
    font-size: 20px;
}

<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>