4

以下を使用して、サイトの外部リンクのスタイルを設定し、サイト外のドメインへのリンクの後にアイコンを自動的に追加しました。

a[href^="http://"]:not([href*="website.com"]):after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

ページに Google マップを含むライトボックスを開く画像があるため、上記のコードはそれを外部リンクと見なし、画像の後にアイコンを追加します。基本的に、anotherdomain.com からのリンクにスタイルを適用しないと言う方法はありますか?

上記のオプションに maps.google.com を追加しようとしましたが、うまくいきませんでした。複数の値をサポートしているかどうかわかりませんか?

どんな助けでも大歓迎です！前もって感謝します！！

4

3 に答える 3

0

まず、ほとんどのサイトがそのhttps://方向に向かっているため、セレクターを調整する必要があるかもしれません。または、https://オプションの追加を検討してください。

a[href^="http://www"],
a[href^="https://www"]

または、もっと簡単に

a[href^="http"]

外部スタイルを必要とするリンクとそうでないリンクを区別するために私が使用する 1 つの方法は、サイトの外部リンクにwww.

a[href^="http://www"]::after,
a[href^="https://www"]::after

... 他のリンク (anotherdomain.com や maps.google.com など) は一致しません。

www を持たない外部リンク スタイルを必要とする Web サイト (例: meta.stackexchange.com) を探す必要があるため、これは 1 つの方法にすぎません。

別のオプションは、元のルールを単純にオーバーライドすることです。

a[href*="maps.google.com"] { ... !important ; }

または、より具体的にはこの場合

a[href*="maps.google.com"]::after {
    font-size: 0 !important;
    padding-left: 0 !important;
}

アンカー要素の外部スタイルを非表示にする 2 つの一般的な解決策は次のとおりです。

  1. この目的のためにクラスを作成します。

    .no-external-link-icon {
    background-image: none !important;
    padding-left: 0 !important;
}

  2. スキームなし (またはプロトコルなし) の URL を使用します。

    //www.stackoverflow.com
于 2016-07-22T15:06:49.847 に答える
0

セレクターを使用して、:matches一致させたいサイトを特定し、既存のコードで他のすべてのスタイルを設定し、後にアイコンを追加してみてください (現在のアプローチの逆です)。

a[href^="http://"]:after { 
  font-family: "FontAwesome";
  content: "\f08e";
  font-size: 10px;
  padding-left: 2px;
}

a[href^="http://"]:matches([href*="website.com"], [href*="otherwebsite.com"]):after { 
 }

注：実際には試していません。

于 2016-07-22T14:38:26.633 に答える