다음 요소의 CSS에서 선택기의 구문은 무엇입니까?

헤더 태그가 있다면 <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>있습니다.

CSS를 사용하여 <p>다음에 오는 모든 태그가 h1.hc-reform사용하도록하려면 어떻게해야합니까?clear:both;

그럴 것입니다 :

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

어떤 이유로 작동하지 않습니다.

이것은 인접한 형제 선택기 라고 하며 더하기 기호로 표시됩니다 ...

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

참고 : 이것은 IE6 이전 버전에서는 지원되지 않습니다.

형제 선택기를 사용할 수 있습니다 ~.

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

첫 번째 p요소 .hc-reform뿐만 아니라 이후 에 오는 모든 요소를 선택합니다 .

>자식 선택기는 없습니다 .

당신이 원하는 것은 +

그래서 시도하십시오 h1.hc-reform + p

브라우저 지원이 좋지 않습니다

는 >A는 자식 선택 . 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;
}

정확히. h1.hc-reform > p수단 "모든 p정확히 하나 개의 레벨 아래에 h1.hc-reform".

당신이 원하는 것은 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/