css - 特定のクラスを持つ姉妹との関係

Question

これが実行可能かどうかはわかりませんcssが、私がやりたかったことは

たとえば、次のhtmlような構造があるとします:-

<h4>Title <span class="specific"> text </span> </h4>
<div>
    <p> This is some text. </p>
</div>

今、要素のスタイルを設定したいのですが、要素の関係としてdiv p使用したいです。h4 span.specificdiv p

括弧を使用すると、次のようになります。(h4 span.specific) ~ (div p)

これがCSSだけでできるかどうか知りたかっただけです。

score 0 · Accepted Answer

CSS は非常に強力で、そうするのに役立ちます。

(h4 span.specific) ~ (div p) の代わりに、

h4 > span.specific + div > p

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

編集：

span.specific を指定することはできませんが、div 内で ap の後に h4 を指定することはできます。

h4 + div > p.

混乱をお詫び申し上げます。

score 0 · Accepted Answer

括弧は有効な CSS セレクター演算子ではありません。

セレクターとコンビネーターのシーケンスは、右から左に読み取られます。

<h4 class="specificParent">Title <span class="specific"> text </span> </h4>
<div>
    <p> This is some text. </p>
</div>

CSS:

h4.specificParent~div>p {
    background-color: red;
 }

上記のステートメントを次のように解釈します

specificParent クラスを持つ h4 の兄弟である親 div を持つ p 要素を選択します

ここで動作するデモを見つけてください: Demo

score 0 · Accepted Answer

あなたはこれによってのみこれを達成することができます

私はこれに対する他の解決策を見つけることができません

h4 ~ div p{
   color:green 

}

4 に答える 4