19

クラスまたはIDが他の多くのIDおよびスタイル内にネストされているスタイルシートにCSSルールを適切に記述する方法に関する特定の詳細を見つけようとして問題が発生しています。

.mainbody #container #header #toprightsearch .searchbox {}

ここでは、ID 内、ヘッダー ID 内、コンテナ ID内、searchboxクラス内にクラスがあります。toprightsearchmainbody

しかし、いくつかの ID を省略しても、正しく動作しているように見えます。

これらをリストする正しい方法は何ですか?
すべての親を含めると、より具体的になりますか? すべてを含めないと、別のブラウザーでエラーになることはありますか?

また、このトピックに関する追加情報をいただければ幸いです。

ありがとう

4

6 に答える 6

35 
.searchbox {}

.searchbox を使用して何でもスタイルします

.mainbody .searchbox{}

任意の .mainbody、直接の子、孫、4 重のひ孫の子孫である .searchbox のスタイルを設定します。

#toprightsearch > .searchbox {}

#toprightsearch の直接の子である .searchboxes のみをスタイルします

#container * .searchbox {}

#container の孫以降の .searchbox をスタイルします。

このトピックに関する優れたドキュメントは次のとおりです: w3C セレクター

于 2009-06-07T17:00:18.167 に答える
7

より多くの親を含めると、セレクターの特異性が高まります。親を省略することでクロスブラウザーの問題が発生することはありません。

リストする親の正確な数はありません。マークアップに必要なものによって異なります。ご覧のとおり、は a内の任意のレベルをselector1 selector2意味し、必要な動作に合わせて調整できます。selector2selector1

あなたの例では、スタイルがその階層全体の内部にある esにのみ適用されることを意味する.mainbody #container #header #toprightsearch .searchboxかどうかをリストする必要があります。逆に、同じスタイルを取得するために他の条件で存在させたい場合は、階層内の制限を緩和する必要があります。それはあなたが達成しようとしていることだけです。.searchbox.searchboxes

再コメント: ID はより特異性を生み出すため、ID を省略するとルールの特異性がさらに低下します。

于 2009-06-07T16:49:06.933 に答える
4

ID はページに固有です。だからあなたはただ使うだろう

#toprightsearch {
 stylename: stylevalue;
}

ネストされたクラスを探している場合、正しい形式は

.header .textBoxes {
  stylename: stylevalue;
}

親の正確な子がわかっている場合は、> 記号を使用します。したがって、ドキュメントが次のような場合:

<div class="header">
    <div class="menu">
         <input type="text" class="textBox" />
    </div>
</div>

これを使用できます：

 .header > .menu > .textBox {somestyle:somevalue;}

これは、.header のクラスを持つ要素のすぐ下にある .menu クラス アイテムのすぐ内側に .textBox クラスを持つアイテムのみを意味します。

于 2012-08-20T20:48:25.180 に答える
2

W3セレクターのドキュメントから：

子孫セレクターは、このような関係をパターンで表現します。子孫セレクターは、空白で区切られた 2 つ以上のセレクターで構成されます。"A B" 形式の子孫セレクターは、要素 B が祖先要素 A の任意の子孫である場合に一致します。

要するに、すべての親要素を含める必要はなく、クロスブラウザーの問題を引き起こすべきではありません。ただし、このセレクターでは:

.mainbody .searchbox {}

searchbox定義されたスタイルは、 class を持つ要素から直接的または間接的に派生するかに関係なく、 class を持つすべての要素に適用されますmainbody。

ただし、提案されたセレクターでは:

.mainbody #container #header #toprightsearch .searchbox {}

定義されたスタイルはより具体的であるため、 class を持つ要素から派生した要素、次に 、 、の ID を持つ要素、およびクラス名を持つ要素のみに、mainbody定義されたスタイルが適用されます。#container#header#toprightsearchsearchbox

于 2009-06-07T16:57:55.923 に答える
0

以下のコードは、それが示すことを実行します (少なくとも Firefox では)。入力を赤く着色します

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<style type="text/css">
.mainbody #container #header #toprightsearch .searchbox {
    background-color:red;
}
</style>
</head>

<body class="mainbody">

<div id="container">
    <div id="header">
        <div id="toprightsearch">
            <input type="text" class="searchbox" />
        </div>
    </div>

</div>
</body>
</html>

ID とクラスのスペルに何か問題があったかどうかを確認する必要があると思います。

于 2009-06-07T16:45:29.823 に答える