web-dev-qa-db-ja.com

スタイルの順序は重要ですか？

以下は私のマークアップです。ハイパーリンクの上にマウスを移動すると、下線が引かれ、赤に変わります。しかし、最後の2つのルールの順序を入れ替えると、ハイパーリンクには下線が引かれますが、色は赤ではなく黒に変わります。これは仕様によるものですか？もしそうなら、ルールはどのように適用されますか？

ありがとう！コンスタンチン


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>
    <style type="text/css" media="all">
        .menu a
        {
            text-decoration: none;
        }
        .menu li:hover a
        {
            color: black;
        }
        .menu li a:hover
        {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">item0</a></li>
            <li><a href="#">item1</a></li>
        </ul>
    </div>
</body>
</html>
csscss-selectors
29
akonsu

ルールの特異性が等しい場合（この場合はそうである）、個々のルールはオーバーライドされますCSSで定義されている順序でしたがって、この例では、CSSの後半に来るため、赤が優先されます。定義。同じルールが他の場合にも適用されます。例：

<div class="red green">

これらのどれが勝ちますか？

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

.redがここで勝ちます。class属性の順序は関係ありません。重要なのは、CSS自体でスタイルが定義されている順序だけです。

49
Nick Craver

次のHTMLを検討してください。

<div class="red">
    Some red text...
</div>

そしてこのCSS ..

.red {color: red}
.red {color: blue}
.red {color: yellow}

ご想像のとおり、テキストは黄色になります。

9
Marko

はい、順序は重要です。この場合、実際には順序ではないため、順序に関係なく同じ結果が得られます。

.menu li:hover aはliの親であるaに適用され、ホバーはaには適用されず、liに適用されます。

.menu li a:hoverはaに適用されます。

順序に関係なく、.menu li a:hoverスタイルがaに適用されます。

これを処理するためのより良い方法は、hover疑似セレクターをa要素のみに適用し、heightとwidthを100％に設定してdisplay: blockを設定することです。これにより、LI全体が埋められます

これが物事を明らかにすることを願っています。

5
Dustin Laine

はい、そうです。 カスケード順序 の最後のポイントは次のとおりです。

最後に、指定された順序で並べ替えます。2つの宣言の重みが同じである場合、Originと特異性は、指定された後者が優先されます。インポートされたスタイルシートの宣言は、スタイルシート自体の宣言の前にあると見なされます。

2
Gumbo

CSSルールは、同じ特異性を持っている場合、順番に適用されます。あなたの場合、彼らはそうするので、順序が重要です。

質問の順序に応じて、ルールが適用されますtext-decoration: none。 2番目と3番目のルールでは、aタグがliタグ内にあるため、リンクの上にマウスを置くと、これら2つのスタイルが順番に変更されます。まず、色が黒に変わります。その後、色が赤に変わり、下線が表示されます。

次のように、最後の2つのルールの順序を逆にします。

    .menu a
    {
        text-decoration: none;
    }
    .menu li a:hover
    {
        color: red;
        text-decoration: underline;
    }
    .menu li:hover a
    {
        color: black;
    }

さて、text-decoration: none以前と同じように適用されます。次に、マウスオーバーすると、最初のルールで色が赤に変わり、下線が追加され、続いて色が黒に変わります。

1
Jeff Mattfield