3

CSSを使用していくつかのHREFの最後に文字を適用したいのですが、機能する方法を見つけましたが、アンカーにも文字を適用します。アンカーにキャラクターを付けたくありません。これまでのところ、プロパティを取得してDIV全体に適用することしかできませんが、HREFにのみ選択的に適用できる単純なクラスに固定することはできません。

これが私が持っているものです：

#sample a:after {
position: absolute; /* Prevent underline of arrow */
padding-left:2px; /* Add a little space between text and arrow */
content: "\00bb"; /* Unicode hex for » */
}

助言がありますか？

私のDIVはいくつかのリンクスタイルを保持していますが、それを移動する必要がありますか？例：

#sample a:hover {
    color:#CCCCFF; 
    text-decoration:underline; 
    margin-top:20px;
}

私の上司は言います：私たちが言うリンクを除いて、サイト上のすべてのリンクに文字を持たせてください。もちろん、彼には私に見せるための実例はありません。

4

3 に答える 3

3

これは、属性が設定されa[href] {ているすべてのアンカー要素をターゲットにすることを意味します。href詳細については、W3C 仕様を参照してください。

例。

HTML

<a href="#link" id="link">link</a>
<br />
<a id="anchor">anchor</a>​

CSS

a[href]:after {
  position: absolute; /* Prevent underline of arrow */
  padding-left:2px; /* Add a little space between text and arrow */
  content: "\00bb"; /* Unicode hex for &raquo; */
}​
于 2012-11-23T15:30:03.407 に答える
1

一般に、CSS でリンクを参照する最もクロス ブラウザーな方法は、セレクターの代わりに:linkおよび:visited疑似要素 (それぞれ未訪問リンクと訪問済みリンクを表す) を使用することですa。

#sample :link:after, #sample :visited:after

この場合、:after疑似クラスも使用しているので、属性セレクターを使用するより単純な方法を使用することもできます (また、属性セレクターよりもサポートがわずかに制限されています)。

#sample a[href]:after

a最も簡単なことは、要素をリンク以外の目的で使用しないことです。の使用は<a name=...>推奨されておらず、id一部の自然要素で属性を使用することが推奨されています。

追加: 質問は、選択したリンクの矢印を防止することについてもありました。class=noarrowこれらのリンクのような属性を使用して選択を示し、生成されたコンテンツを空に設定する CSS ルールを追加するように、これを実装できます。

#sample :link.noarrow:after, #sample :visited.noarrow:after {
  content: ""; 
}

:not(...)これは、ブラウザーのサポートの問題により、セレクターを使用するよりも優れたアプローチである可能性があります。しかし、最新のブラウザーでは、次のアプローチも機能します。2 つのルールの代わりに、特定のクラスを除外する 1 つのルールのみを使用します。

#sample :not(.noarrow):link:after, #sample :not(.noarrow):visited:after {
  content: "\00bb"; /* Unicode hex for &raquo; */
  padding-left: 2px;
}

矢印 (生成されたコンテンツ) に下線が引かないようにする方法は、さらに別の問題です。質問で使用されているトリックは、IE では機能しないようです。また、矢印をオーバーレイテキストにします。この問題に対する適切な答えはありません。別の質問として議論するのが最善だと思います (既存の質問で議論されている場合を除きます)。

于 2012-11-23T17:37:34.193 に答える
-1

アンカーにクラス名を追加し、リンクで使用される宣言された CSS を上書きします。

于 2012-11-23T15:28:30.120 に答える