一个:第一个孩子，修改我列表中的所有链接 [英] a:first-child modifying all links within my list
问题描述
我的链接有问题，我似乎找不到为什么第一个孩子这样做的原因.
它没有修改我的无序列表中的第一个链接，而是全部修改了它们.当我尝试使用最后一个孩子或第n个孩子时，也会发生同样的事情.
有人可以帮我解决这个问题吗?谢谢
<！DOCTYPE HTML PUBLIC-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">< html>< head>< title></title>< style type ="text/css">* {margin:0; padding:0; font-size:13px; color:white; font-family:arial;}身体{background-color:black;}#wrapper {margin:0px auto; width:1024px;}#types {position:relative; top:4px; width:810px; list-style-type:none;}#types li {display:inline;}#types {{text-decoration:none; padding:8px; margin:-1px; background-color:#1A1A1A;}#types a:hover {background-color:#A02723;}#types a:first-child {background-color:#A02723;}</style>< script type ="text/javascript"></script></head><身体>< div id ="wrapper">< ul id ="types">< li>< a href =#"> 1</a></li>< li>< a href =#"> 2</a></li>< li>< a href =#"> 3</a></li>< li>< a href =#"> 4</a></li>< li>< a href =#"> 5</a></li>< li>< a href =#"> 6</a></li>< li>< a href =#"> 7</a></li>< li>< a href =#"> 8</a></li>< li>< a href =#"> 9</a></li></ul></div></body></html> a:first-child 匹配作为其父级的第一个孩子的< a> 元素.您的< a> 元素位于完全不同的< li> s中，因此它们 all 是其父元素的第一个子元素./p>
您应该匹配< li> 元素:
#types li:first-child a {background-color:#A02723;} I'm having a problem with my links and I can't seem to find why first-child is acting this way.
Instead of modifying the first link inside my unordered list, it modifies them all. The same thing happens when i try using last-child or nth-child.
Could anyone help me figure this out? Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {margin:0;padding:0;font-size:13px;color:white;font-family:arial;}
body {background-color:black;}
#wrapper {margin:0px auto;width:1024px;}
#types {position:relative;top:4px;width:810px;list-style-type:none;}
#types li {display:inline;}
#types a {text-decoration:none;padding:8px;margin:-1px;background-color:#1A1A1A;}
#types a:hover {background-color:#A02723;}
#types a:first-child {background-color:#A02723;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<ul id="types">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</div>
</body>
</html>
a:first-child matches <a> elements that are the first child of their parent. Your <a> elements are in completely different <li>s, so they all are the first children of their parent element.
You should match the <li> elements instead:
#types li:first-child a {background-color:#A02723;}
这篇关于一个:第一个孩子，修改我列表中的所有链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
