css - CSS でリテラルをキャプチャする

Question

いくつかの NAV バーがあります。各 NAV バーはパターンです。

| | a

そのようなリテラル "|" が発生した場合、常に左側に兄弟 a があります。

ここで、a は HTML アンカー要素であり、「|」対象のリテラル区切り記号です。

そのリテラル "|" をキャプチャするためにどの CSS を使用できますか? アイデアは、印刷メディアには display:None を設定したいということです。

助けてくれてありがとう。

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

単純なテキスト ディバイダが必要な場合は、このcontentプロパティを使用すると、これを実現するための高速でセマンティックな方法になります。

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

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

コンテンツと隣接する兄弟セレクター (上記のセレクターの +) は、IE6 などの古いブラウザーでは機能しませんが、これは単なる仕切りであるため、大きな問題にはなりません。

編集:これにより がリンク内|に表示されることに注意してください。そのため、代わりにリストを使用する必要があります (これは、これをマークアップする正しい方法でもあります)。

Answer 4

CSS で何かを選択するには、フックが必要です。「|」の場合 文字は何らかの方法でマークアップされていないため、選択できません。それらを要素に入れるspanか、できれば背景画像に置き換えて、ナビゲーションを実際のリストとして定義してください。

Answer 5

ええ、たとえばスパン要素でそれらを囲む必要があります。次に、それらのスパンに「パイプ」などのクラスを与えます。次に、CSS クラス "pipe" を使用して、印刷用に表示を none に設定します。

Answer 6

親要素を外側に配置できますが、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;
}