[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>

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


답변

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

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

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

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


답변

초보자를위한 Simplyfing :

다른 요소 바로 다음에 요소를 선택하려면 +선택기 를 사용합니다 .

예를 들면 :

div + p은 “+”요소 모두 선택 <p>직후에 배치 된 소자 <div>요소


선택기에 대해 자세히 알아 보려면이 표를 사용하세요.


답변

최신 CSS를 사용하고 “+”가 작동하지 않아서

: 첫 아이


답변