Question

我试图获得第一个a：将鼠标悬停在div中以获得不同的右边距，但我在此论坛上找到的解决方案似乎都没有被浏览器识别（I＆＃39; m使用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 margin。

以下完整源代码：

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

应该是：

<div class="search"> 
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="searchbox">




                    <form role"form">

                        <div class="row inside">

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="group1" name="group1" class="form-control">
                                <option value="" selected disabled> Please Select Group1 </option>
                                <option> 1 </option>
                                <option> 2 </option>
                                <option> 3 </option>
                                <option> 4 </option>
                                <option> 5 </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <select id="group2" name="group2" class="form-control">
                                <option value="" selected disabled> Please Select Group2 </option>
                                <option> 1 </option>
                                <option> 2 </option>
                                <option> 3 </option>
                                <option> 4 </option>
                                <option> 5 </option>
                            </select>
                        </div>
                    </div>


                    <div class="col-md-3">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Group3">
                        </div>
                    </div>  

                    <div class="col-md-1">
                        <button type="submit" class="btn btn-default btn-primary boxing "> Search </button>
                    </div>


                    </div>


                    </form>
                    </div>

            </div>
        </div>
    </div>
</div>




<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

你编写它的方式，它选择#example a:first-child:hover { margin-right: 0px; }的第一个实例（如果它是第一个孩子）并将CSS添加到该实例。

修改正如您在此JSFiddle中看到的那样，它有效 - 我添加了#example以显示更多内容。

其余的链接＆＃34;移动＆＃34;，因为链接的两个边在悬停时获得-1px边距，并且可以像这样修复：

color:red;

Answer 2

试试这个。选择'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>

Answer 3

选择器#example:first-child表示具有id '示例'的第一个孩子，如果您想要第一个锚点孩子，则需要#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永远不会正确。

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

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

#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

CSS第一个孩子用一个元素悬停

3 个答案: