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

다음 요소에 대한 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

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

그>하위 선택기입니다.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/

언급URL : https://stackoverflow.com/questions/3660046/what-is-syntax-for-selector-in-css-for-next-element