[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
요소에 대한 올바른 스타일이 있지만 p
HTML 에서 태그 스타일도 지정하고 싶습니다 .
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>
답변
내 자신이 이런 종류의 문제를 해결하려고 할 때 이것을 누르십시오.
나는 p가 아닌 다른 요소가 된 후 요소를 다루는 선택기를 수행했습니다.
.here .is.the #selector h4 + * {...}
이것이 그것을 찾는 사람에게 도움이되기를 바랍니다. 🙂
답변
초보자를위한 Simplyfing :
다른 요소 바로 다음에 요소를 선택하려면 +
선택기 를 사용합니다 .
예를 들면 :
div + p
은 “+”요소 모두 선택 <p>
직후에 배치 된 소자 <div>
요소
선택기에 대해 자세히 알아 보려면이 표를 사용하세요.
답변
최신 CSS를 사용하고 “+”가 작동하지 않아서
: 첫 아이