Question

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

目前：文字＆gt;图像＆gt;图像＆gt;图像＆gt;

期望的：文字＆gt;图像图像

感谢

<!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>

Answer 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中删除相同的作业。

Here is a jsFiddle of it looking as you wish.

Answer 2

我建议你分开你的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代表独特元素。

Answer 3

我建议你修改

#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;
}

updated fiddle

css - 仅在文本链接上的分隔符而不是图像

3 个答案: