web-dev-qa-db-ja.com

CSSスタイルのネスト-適切なフォーム？

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

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

したがって、ここでは、searchbox ID内、ヘッダーID内、コンテナーID内、toprightsearchクラス内にmainbodyクラスがあります。

ただし、一部のIDを省略した場合は、正しく機能しているように見えます。

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

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

ありがとう

cssnested
19
user103219

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

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

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

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

7
chaos
.searchbox {}

.searchboxで何でもスタイルを設定

.mainbody .searchbox{}

.mainbody、直接の子、孫、4人のひ孫の子孫である.searchboxのスタイルは関係ありません。

#toprightsearch > .searchbox {}

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

#container * .searchbox {}

#containerの孫以降の.searchboxのスタイル。

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

33
Ryan Florence

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クラスを持つアイテムのみを意味します。

4
David

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

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

つまり、親要素のallを含める必要はなく、ブラウザ間の問題を引き起こすこともありません。ただし、このセレクターでは：

.mainbody .searchbox {}

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

ただし、提案されたセレクターでは、次のようになります。

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

定義されたスタイルはより具体的であるため、クラスmainbodyの要素から派生した要素のみが、IDが#container、#header、#toprightsearchの要素になります。順序とクラス名がsearchboxの場合、定義されたスタイルが適用されます。

2
Alex Rozanski

理論的には、IDはページ上の1つの特定のアイテムにのみ使用する必要があります。したがって、IDがtoprightsearchのアイテムは1つだけである必要があるため、CSSの場合は、以下を指定するだけで済みます。

toprightsearch .searchbox {}

ページにはIDがtoprightsearchのアイテムが1つしかないため、他のすべてのセレクターは不要です。

IDがtoprightsearchのアイテムがページに2つある場合、それは悪いコーディング慣行です。

1
Neptune704

以下のコードはそれが言うことをします（少なくとも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とクラスのスペルに問題があったかどうかを確認する必要があると思います。

0
jao