0

HTML ドキュメント内の 1 つのアンカーだけにスタイルを適用しようとしています。ただし、その 1 つの要素だけに css スタイルを適用しようと a[title] を試みましたが、何も起こりません。なぜこれが機能しないのでしょうか。このタイプの形式を使用したスタイルについて、フィードバックをいただければ幸いです。ありがとう

htmlコード

<div class="col_2">
       <img src="img/blueman.png" width="70" height="70" class="img_left imgshadow" alt="" />
       <p class="newsSpace"><a href="#" title="logout">Signout</a></p>
   </div>

CSSコード

a[title] {

      font-size: 24px;
      font-family: Verdana, Geneva, sans-serif;
      /* border-bottom:1px solid #777777; */
      }

メインメニューコード

#menu li a {
    color: #000000;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    outline: 0 none;
    text-decoration: none;
}
4

1 に答える 1

2

作成したセレクターは機能するはずです。実際、他のコメントや回答からわかるように、単独で使用すると機能します。

CSS が機能しない理由として最も可能性が高いのは、CSS の他の何かが優先して適用されている場合です。CSS にはセレクターの優先順位が厳密にあり、a[title].

ブラウザの開発ツール (Firebug など) で要素を調べて、どのスタイルがどのセレクターによって適用されているかを判断することをお勧めします。

私が正しければ、a[title]スタイルがそこにあることがわかりますが、優先度の高い他のスタイルも適用されているため、取り消し線が引かれています。

CSS の優先順位について説明している記事は次のとおりです。

この問題を回避するために提案できる 4 つの方法があります。

  1. a[title]他のセレクターよりも優先順位が高くなるようにセレクターを調整します。これは通常、より正確にすることを意味し.newsSpace>a[title]ます。

  2. 優先順位が低くなるように他のセレクターを調整します。

  3. スタイルの最後に追加!importantして、ブラウザーに強制的にそれらを最大限に優先させます。(これは「即効」オプションですが、最後の手段と考えるべきです。!important通常、使用すると、他の場所で何か間違ったことをしていることを意味します)

  4. 要素に独自のクラスまたは ID を与えるように HTML を変更し、それを の代わりにセレクターに使用しますa[title]。

それが役立つことを願っています。

[編集]

OPは更新されたフィドルリンクで以下にコメントしました、そして私は今問題を見ることができます:

さて、更新されたリンクをありがとう。#menu li div a[title]CSSコードで確認できるようになりました。

Chrome Dev Tools (F12) を使用して問題の要素を見ると、そのすべてのスタイルがSignout要素に正常に適用されていることがわかります。ただし、このfont-sizeプロパティは によってオーバーライドされて#menu li:hover div aおり、 によってより具体的であると分類されてい:hoverます。

要素はホバーされているときにのみ表示されるため、解決策は簡単に見えます。他のセレクターに適用されるのと同じ:hoverプロパティを追加するだけです。#menu li div a[title]

だからそれを#menu li:hover div a[title]

簡単な変更を加えたフィドルをもう一度示します: http://jsfiddle.net/TrScN/3/

于 2013-06-15T14:04:48.537 に答える