我试图让 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 */
}
最佳答案
应该是:
#example a:first-child:hover {
margin-right: 0px;
}
按照您编写的方式，它会选择 #example 的第一个实例(如果它是第一个 child )并向其添加 CSS。
编辑:
正如您在此 JSFiddle 中看到的那样, 它有效 - 我添加了 color:red; 以显示更多。
其余链接“移动”，因为链接的两侧在悬停时都有 -1px 边距，可以这样固定:
a:hover {
margin: 0 0 0 -1px;
}
关于html - CSS第一个 child 悬停在一个元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32845700/