web-dev-qa-db-ja.com

次の要素に対するCSSのselectorの構文は何ですか？

ヘッダタグ<h1 class="hc-reform">title</h1>がある場合

h1.hc-reform{
    float:left;
    font-size:30px;
    color:#0e73bb;
    font-weight:bold;
    margin:10px 0px;
}

そしてその後、私は段落<p>stuff here</p>を持っています。

<p>の後に続くすべてのh1.hc-reformタグにCSSを使用させるにはどうすればよいですか。clear:both;

それだろう：

h1.hc-reform > p{
     clear:both;
}

何らかの理由でそれが機能していません。

htmlcsscss-selectorssiblings
184
tony noriega

これは、 隣接兄弟 セレクタと呼ばれ、プラス記号で表されます。

h1.hc-reform + p {
  clear:both;
}

注：これはIE 6以前ではサポートされていません。

370
Josh Stodola

兄弟セレクタ~を使うことができます。

h1.hc-reform ~ p{
     clear:both;
}

これは、最初の要素だけでなく、.hc-reformの後に来るすべてのp要素を選択します。

54
Stephan Muller

no >は子セレクタです。

欲しいのは+です

だからh1.hc-reform + pを試してみてください

ブラウザのサポートは素晴らしいではありません

13
Moin Zaman

>は 子セレクタ です。あなたのHTMLがこのように見えるならば：

<h1 class="hc-reform">
    title
    <p>stuff here</p>
</h1>

...それであなたのチケットです.

しかしあなたのHTMLがこのように見えるなら：

<h1 class="hc-reform">
    title
</h1>
<p>stuff here</p>

それならあなたは 隣接セレクタ が欲しいです：

h1.hc-reform + p{
     clear:both;
}
8
Richard JP Le Guen

ではない正確に。 h1.hc-reform > pは、「h1.hc-reformの直下にある任意のp」を意味します。

欲しいのはh1.hc-reform + pです。もちろん、それは古いバージョンのInternet Explorerでいくつかの問題を引き起こすかもしれません。ページを古いIEと互換性を持たせたい場合は、段落に手動でクラスを追加するか、またはJavaScriptを使用して（jQueryでは$('h1.hc-reform').next('p').addClass('first-paragraph')のように）できます。

詳細情報： http://www.w3.org/TR/CSS2/selector.html または http://css-tricks.com/child-and-sibling-selectors/）

1
Justin Russell