0

我有几个 NAV 酒吧。每个 NAV Bar 都是该模式；

一个 | 一种

这样，文字“|” 发生，它总是在左边有一个兄弟姐妹 a 。

其中 a 是一个 html 锚元素，“|” 是感兴趣的文字分隔符。

我可以使用什么 css 来捕获该文字“|”？这个想法是我想将它设置为 display:None 用于印刷媒体。

谢谢你的帮助。

4

6 回答 6

3

我的建议是使用无序列表

<ul class="myNav">
   <li><a>My Nav</a>
   <li class="last"><a>Another nav</a>
</ul>

然后将列表项向左浮动，然后在每个列表项的一侧放置一个边框。现在下面的 CSS 并不准确，但它给出了总体思路

.myNav li {float:left;border-right:1px solid black;}
.myNav li.last {border-right:0}

这应该看起来相似，并且对于分隔符是 100% css。

于 2009-10-08T17:23:04.500 回答
1

CSS 选择 html 元素。| 不是 html 元素，它是文本节点，您无法访问它。但是，您可能可以在锚点上使用背景图像，并将它们作为分隔线。那个 or wrap 跨越分隔线并以它们为目标。

<span class="divider">|</span>

或者

#nav a { background:url(/images/divider.gif) no-repeat top left; }
#nav li.last a { background-image:none; }

我没有提到边框，因为它们会依赖于被应用的元素的高度，并假设你想要更多的控制，更多的定制，但你当然可以使用这些。

于 2009-10-08T17:19:49.000 回答
0

你需要钩子来使用 CSS 选择任何东西。如果“|” 字符没有以某种方式标记，您无法选择它们。将它们放入span元素中，或者更好的是，将它们替换为背景图像，并将您的导航定义为真实列表。

于 2009-10-08T17:18:38.987 回答
0

是的，你必须用一个 span 元素来包围它们。然后给这些跨度一个“管道”或其他东西。然后使用 CSS 类“管道”将显示设置为无以进行打印。

于 2009-10-08T17:21:11.150 回答
0

您可以将父元素定位在外部，但将a元素定位在视口内。像这样的东西：

div {
    position: relative;
    top: -10em;
}
div a {
    position: relative;
    top: 10em;
}

但是您最好使用列表进行导航和格式：

<ul id="nav">
    <li><a href="…">first</a></li>
    <li><a href="…">second</a></li>
    <li><a href="…">third</a></li>
</ul>

#nav, #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav li {
    float: left;
}
于 2009-10-08T17:21:59.340 回答
0

如果您只需要一个简单的文本分隔符，则使用该content属性是实现此目的的一种快速、语义化的方式。

<div id="nav">
     <a href="#">Nav1</a>
     <a href="#">Nav2</a>
</div>

#nav a + a:before { content: '|'; }

请注意，内容和相邻的兄弟选择器（上面选择器中的 +）在 IE6 等较旧的浏览器中不起作用，但由于这只是一个分隔符，所以它不应该是一个大问题。

编辑：请注意，这将使链接|出现在链接中，因此您应该改用列表（这也是标记它的正确方法）。

于 2009-10-08T17:27:15.130 回答