Question

我有几个NAV吧。每个NAV Bar都是这种模式;

a |一个

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

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

我可以用什么css来捕获那个文字“|”？我的想法是我要设置它的显示：打印介质没有。

感谢您的帮助。

Answer 1

我的建议是使用无序列表

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

Answer 2

CSS选择html元素。 |不是一个html元素，它是一个文本节点，你无法访问它。但是，您可以使用锚点上的背景图像，并将它们作为分隔符。那个或包裹在分隔物周围并且以它们为目标。

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

或

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

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

Answer 3

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

Answer 4

是的，你必须用一个span元素包围它们。然后给那些跨度一类“管道”或什么。然后使用CSS类“pipe”将显示设置为none以进行打印。

Answer 5

您可以将父元素放在视图外部，但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;
}

Answer 6

如果您只需要一个简单的文本分隔符，使用content属性是一种快速，语义的方法来实现这一点。

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

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

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

修改：请注意，这会使|在链接中显示，因此您应该使用列表（这也是正确的方式）无论如何都要记录下来。）

在css中捕获文字

6 个答案: