0

我正在使用其中一些“|” 分隔我正在编码的网站上的不同链接，因为它分隔了彼此相邻的链接。有没有我可以直接添加到 CSS 中的代码来执行此操作？

“全部着色 | #383838”

这是我对 HTML 所做的一个示例：

主页| 第 1 页

^ 我没有使用真正的链接，但这就是它在我的网站上的显示方式。（虽然不是那些颜色）....这是我用来执行此操作的代码。

<p><a href="LINK HERE">Home</a> | <a href="LINK HERE">Page 1</a>

问题：在我的页面上，所有的文本和链接都是一种颜色。有“|” 在 HTML 的代码中，它会自动将“|” 颜色与所有其他文本和链接一样。我可以在 CSS 中添加一些东西来使每个“|” 另一种颜色？

Juhana 的解决方案最终奏效了。但是，当我用 <p></p> 包裹它时……它又会变回相同的颜色……我必须将它包裹在 <p></p> 中，否则它会直接位于顶部版权页脚的...关于如何创建空间的任何想法，以便它们彼此叠放而没有空间（无需添加 <p></p>）？

最终找到了我自己的解决方案，使用：< br />

感谢所有帮助过的人。

4

5 回答 5

3

您可以将此 css :border-right :solid 1px #000000;应用于锚链接周围的标签。

于 2013-03-16T08:00:01.343 回答
3

使用无序列表放置链接，然后添加 | 像那样：

li:after {
    content: '|';
}
于 2013-03-16T08:02:25.530 回答
1

MarcinJuraszek 非常正确，我也会这样做。但我还要补充：

li:last-child:after {
   content: '';
}

删除最后一个链接后的行

于 2013-03-16T08:06:51.130 回答
1

无法在其他未标记的文本中设置单个字符的样式。如果|字符是链接组中唯一的非链接文本，请将其包装在 div 中并设置样式。它不会影响链接的颜色。

<div class="links">
    <a href="LINK HERE">Home</a> | <a href="LINK HERE">Page 1</a>
</div>

CSS：

.links {
    color: #383838;
}

或者，如果还有其他文本，因此无法包装整个块，请包装单个字符：

<a href="LINK HERE">Home</a> <span class="separator">|</span> <a href="LINK HERE">Page 1</a>
于 2013-03-16T08:14:04.590 回答
0

给li元素border-right:1px solid black，然后给最后一个 li 孩子：

li:last-child{border-right:none;}

对于 IE8 兼容性，请检查selectivizr

下载 selectivizr 并将其包含在您的项目中，然后将此代码包含在 head 标签中

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
   <script type="text/javascript" src="selectivizr.js"></script>
   <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
于 2013-03-16T08:09:05.917 回答