CSS第一个孩子悬停在一个元素上
Posted
技术标签:
【中文标题】CSS第一个孩子悬停在一个元素上【英文标题】：CSS first child hover with a element 【发布时间】：2015-12-27 00:51:18 【问题描述】：我试图让 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" 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 */
【问题讨论】：
从您对 rblarsen 的评论中，您说“在第一个 上悬停时，我不希望它向左移动，这样整个链接集就不会移动我将鼠标悬停在第一个链接上”——这是否意味着当您悬停第二个和第三个链接等时，您确实希望链接集向左移动？ @xec 否。基本上，当我悬停时，字体粗细会增加。因此，通过将每边的边距设置为 -1px，它可以防止相邻链接在悬停时移动一点。但是，如果我将鼠标悬停在第一个链接上，它仍会将其他所有内容移至左侧 -1px。所以，我希望第一个 在悬停时有一个修改的左边距，与其他的不同。 【参考方案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 永远不会正确。
没有简单的解决方案，但有几个解决方法：
-
悬停时不要更改字体粗细，请改用下划线或颜色更改。
使所有链接都具有固定宽度（因此它们不依赖于其内容宽度，如下所示：
#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
【讨论】：
【参考方案2】：应该是：
#example a:first-child:hover
margin-right: 0px;
按照您的编写方式，它会选择#example 的第一个实例（如果它是第一个孩子）并将CSS 添加到其中。
编辑：
正如您在此 JSFiddle 中看到的那样，它有效 - 我添加了 color:red; 以显示更多信息。
其余的链接“移动”，因为链接的两边在悬停时都有-1px的边距，可以这样固定：
a:hover
margin: 0 0 0 -1px;
【讨论】：
它不是“采用#example 的第一个实例”，而是“如果它是 :first-child，则选择#example” - 区别不大，但重要的;)
如果它是第一个孩子？如果只有一个 #example 实例，它将始终是第一个，因此 CSS 将应用于该实例。
抱歉，上面写错了。第一个孩子的左边距应该是 0px。 IE。在第一个 上悬停时，我不希望它向左移动，这样当我将鼠标悬停在第一个链接上时，整个链接集就不会移动。我尝试了上述并添加了一种颜色：红色；以确保我可以看到它是否正在服用它，并且它仍然被完全忽略。我还尝试了 #example>a:first-child:hover 来尝试强制它，但什么也没有。
@rblarsen 这正是我的意思 - #example 不一定是第一个孩子，即使它是页面上唯一具有该 ID 的元素，请参阅 jsfiddle.net/wwLjp6y7
@Beaker 您在 HTML 中拼写“导航”错误【参考方案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>【讨论】：
完全忽略它：/ 据我所知，这是一个很好的答案，因为它准确地展示了如何将单独的悬停效果应用于第一个孩子，因为问题似乎是关于的。如果这不能回答您的问题，我们可以使用更多信息 @xec 我将在上面进行编辑以显示完整的源代码，希望对您有所帮助以上是关于CSS第一个孩子悬停在一个元素上的主要内容，如果未能解决你的问题，请参考以下文章