[html] 다른 요소 다음에 처음 발생하는 요소 선택

페이지에 다음 HTML 코드가 있습니다.

<h4>Some text</h4>
<p>
Some more text!
</p>

내 요소 .css에 스타일을 지정하는 다음 선택기가 있습니다 h4. 위의 HTML 코드는 전체 코드의 일부일뿐입니다. div섀도우 박스에 속하는 몇 가지 가 더 둘러싸여 있습니다.

#sb-wrapper #sb-wrapper-inner #sb-body #myDiv h4
{
    color               : #614E43;
    margin-top          : 5px;
    margin-left         : 6px;
}

따라서 h4요소에 대한 올바른 스타일이 있지만 pHTML 에서 태그 스타일도 지정하고 싶습니다 .

CSS 선택기로 가능합니까? 그렇다면 어떻게해야합니까?

답변

#many .more.selectors h4 + p { ... }

h4 + p {color:red}//any <p> that is immediately preceded by an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I'm not</p>

h4 ~ p {color:red}//any <p> that has the same parent as, and comes after an <h4>

<h4>Some text</h4>
<p>I'm red</p>
<p>I am too</p>

.here .is.the #selector h4 + * {...}