我将尝试为一个div中的第一个a:hover设置不同的右边距,但是我在这个论坛上找到的解决方案似乎都没有被浏览器识别(我使用的是Chrome版本45.0.2454.93m)。
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 */
}