0

右边有文字链接和图片链接。每个链接都有一个分隔符。我只希望文本链接显示分隔符而不是图像链接。

当前：文本>图像>图像>图像>

所需：文本>图像图像图像

谢谢

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style type="text/css">
#footer
{
    height:30px;
    line-height:30px;
    border:solid 1px #E5E5E5;
}

#footer li 
{
    list-style-type:none;
    float:left;
    padding-left:10px;
}

#footer a
{
    height:30px;
    display:block;
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#0088CC;
}

ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}

    </style>
    <script></script>
</head>
<body background-color: #000000;>




<!-- Footer -->
<div style="width=980px;">
    <ul id="footer">
        <li id="text_separator"><a href="http://www.stackoverflow.org">Text</a></li>
        <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li>
        <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li>
        <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li>
        <li><a href="http://www.stackoverflow.org/about"><img src="1.png" width="35" height="30" border=1></a></li>
    </ul>
</div>


</body>
</html>
4

3 回答 3

1

给你想要的项目一个类：

<li id="text_separator"><a class="separator" href="http://www.stackoverflow.org">Text</a></li>

并分配它的CSS：

#footer .separator {
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right;
}

#footer a从普通CSS 中删除相同的分配。

这是一个看起来如你所愿的jsFiddle。

于 2013-10-31T00:58:29.377 回答
1

我建议你修改

#footer a进入#footer li:nth-child(1)

这是JSFIDDLE

更新：维护#footer a和添加#footer li:nth-child(1)

#footer a{
  text-decoration:none;
  color:#0088CC;
}
#footer li:nth-child(1)
{
  height:30px;
  display:block;
  background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
  background-repeat:no-repeat; 
  background-position:right;
  padding-right: 15px;
}

更新的小提琴

于 2013-10-31T01:24:33.760 回答
1

我建议你像这样分开你的CSS：

#footer a
{
    height:30px;
    display:block;
    padding-right: 15px;
    text-decoration: none;
    color:#0088CC;
}

#footer li.text_separator a {
    background-image:url('http://s7.postimg.org/w0nt224pj/bc_separator.png'); 
    background-repeat:no-repeat; 
    background-position:right;
}

并且还通过一个类更改 id "text_separator"：

<li class="text_separator"><a href="http://www.stackoverflow.org">Text</a></li>

这样你就可以在其他列表元素上应用这个 css 类。Id 用于唯一元素。

于 2013-10-31T01:02:56.237 回答