Захват букв в CSS - PullRequest
Новая
       51

Захват букв в CSS

0 голосов
/ 08 октября 2009

У меня есть несколько баров NAV. Каждый NAV-бар имеет шаблон;

a | а

такой, что где буквальное "|" происходит, у него всегда есть сестра слева.

где a является html якорным элементом, а "|" буквальный разделитель интересов.

Какой CSS я могу использовать для захвата этого литерала "|"? Идея заключается в том, что я хочу настроить отображение: Нет для печатных СМИ.

Спасибо за любую помощь.

Ответы [ 6 ]

3 голосов
/ 08 октября 2009

Рекомендую использовать неупорядоченный список 

<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 для сепараторов.

1 голос
/ 08 октября 2009

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

Я не упомянул границы, потому что они будут полагаться на высоту элемента, к которому применяется, и предполагал, что вам нужен больший контроль, больше настроек, но вы, конечно, можете их использовать.

0 голосов
/ 08 октября 2009

Если вам просто нужен простой текстовый разделитель, использование свойства content - это быстрый, семантический способ достижения этого. 

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

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

Обратите внимание, что селекторы контента и смежных братьев и сестер (+ в селекторе выше) не работают в старых браузерах, таких как IE6, но, поскольку это просто делитель, это не должно быть огромным беспокойством .

Редактировать: Обратите внимание, что это заставит | появиться внутри ссылки, поэтому вы должны использовать вместо этого список (это также правильный способ пометить это в любом случае) ).

0 голосов
/ 08 октября 2009

Вы можете расположить родительский элемент снаружи, но элементы 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;
}
0 голосов
/ 08 октября 2009

Да, вам придется окружить их, скажем, элементом span. Тогда дайте этим промежуткам класс "трубы" или что-то. Затем используйте CSS-класс "pipe", чтобы установить для дисплея значение none для печати. ​​

0 голосов
/ 08 октября 2009

Вам нужны хуки, чтобы выбрать что-нибудь с помощью CSS. Если "|" символы не помечены каким-либо образом, вы не можете выбрать их. Поместите их в span элементы или, что еще лучше, замените их фоновыми изображениями и определите свою навигацию как реальный список.

...