2

私はこの単純なことで頭を壊していますか？問題。Firefox と Internet Explorer でテストした結果、バグでもクロス ブラウザの問題でもないことはわかっています。なぜこのように解決するのかわかりません。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
    .red_class { color: red; }
    .blue_class {color: blue;}
</style>
</head>

<body>

<div class="red_class">
  <a class="blue_class" href="http://somesite.com">Somesite</a>
</div>
</body>
</html>

私の謙虚な意見では、両方のルールは同じ特異性を持っているため、blue_class ルールの方が近いため、リンクは青色で表示されると予想していましたが、リンクは赤色で表示されています。実際に「.blue_class」ルールが最初に記述されるように順序を変更しましたが、結果は変わりませんでした

2番目のルールをより具体的にするなど、コードを機能させる方法をいくつか見つけました。次に例を示します。

.red_class a.blue_class {color: blue;}

しかし、これが期待どおりに機能しない理由を本当に理解したいと思います。つまり、リンクにクラス blue_class がある場合、青で表示する必要があります。

助けてくれて本当にありがとう。前もって感謝します。

4

3 に答える 3

0

@Luxferこれは私がする簡単なことです。Firefox用のFirebug Addonをダウンロードします。スタイルを適用する要素を調べます。Firebugの右側には、使用されている CSSを確認できるボックスがあります。CSS ペインを右クリックするだけで、 Add Ruleというオプションが表示されます。それをクリックすると、必要な要素を完全にターゲットとするセレクターが取得されます。

于 2013-04-10T11:20:42.747 に答える
0

機能していないことは確かですか？青は、ほとんどのブラウザのデフォルトで hrefs が青に設定されているため、テストに適した色ではありません。

<div class="red_class">
  <a class="green_class" href="http://somesite.com">Somesite</a>
    <p>More Text</p>
</div>

と

.red_class { color: red; }
.green_class {color: green;}

ここのChromeではうまくいくようです。
- - デモ - - -

于 2013-04-10T11:28:06.847 に答える
0

実際には、赤い色のリンクを取得する方法がわかりません...

が定義されたアンカー要素は、またはのhrefような属性を継承しないため、得られる結果は少し奇妙です。colortext-decoration

http://www.w3.org/TR/html401/struct/links.html#h-12.2

ユーザー エージェントは通常、ユーザーにわかりやすいようにリンクを表示します (下線、反転表示など)。正確なレンダリングは、ユーザー エージェントによって異なります。レンダリングは、ユーザーがすでにリンクにアクセスしたかどうかによって異なる場合があります。

したがって、これはデフォルトのスタイル付きアンカーになります。

.red_class{color:red;}

<div class="red_class">
    <a href="#">Something</a>
</div>

この場合、アンカーは赤色を継承します。

.red_class{color:red;}

<div class="red_class">
    <a>Something</a>
</div>

私は本当に問題を理解していませんが、少なくともこれはアンカーのスタイリングがどのように機能するかの説明です.

于 2012-12-09T02:22:03.793 に答える