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

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

---

페이지에 다음 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>

불행히도 IE 7 이상에서는 버그가있는 것으로 알려져 있습니다 .

---

내 자신이 이런 종류의 문제를 해결하려고 할 때 이것을 누르십시오.

나는 p가 아닌 다른 요소가 된 후 요소를 다루는 선택기를 수행했습니다.

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

이것이 그것을 찾는 사람에게 도움이되기를 바랍니다. :)

참고 URL : https://stackoverflow.com/questions/4623328/select-first-occurring-element-after-another-element