2014-09-07 2 views
2

정말 문제에 대한 정보를 찾을 수 없었습니다. 주로 CSS에 대해 충분히 알지 못해서 검색어가 제대로 검색되지 않아서 미안해합니다.인접 형제 선택기 CSS - 그룹화 할 수 있습니까?

나는 다음과 같은 방법으로 그룹 인접 형제 선택자에 노력하고있어 그래서 다른 어떤 요소가 주어진 마진해야합니다 다음 어떤 헤더 :

.box * + h1, h2, h3, h4 { 
    margin-bottom:0.35em; 
    margin-top:1em; 
} 

모든 제목이 아주 가까이 남아 있기 때문에 이것은 분명히 잘못을 선행 요소. 이런 식으로 할 수 있습니까, 아니면 각 제목을 개별적으로 지정해야합니까? 심지어 머리글 선택기 주위에 대괄호를 사용했는데 ...

어떤 도움을 주셔서 감사합니다!

HTML :이처럼 작성해야

<div id="work" class="box"> 
    <h3>5. Once you're happy with your application, send it off to the employer!</h3> 
    <h4>Important Stuff to Remember:</h4> 
    <p>If you're sending your application by post, you should put a paperclip in the upper left- 
    hand corner of your CV to hold it together (do the same thing with the application form if 
    there is one), then put your application documents in an A4 envelope (don't fold them) in the 
    following order:</p> 
    <ul> 
     <li>1. Application form (if applicable) at the bottom</li> 
     <li>2. Then the CV</li> 
     <li>3. Then the cover letter on top (i.e, covering the other documents)</li> 
    </ul> 
</div> 
+1

HTML을 게시 하시겠습니까? 또한 요소를 올바르게 선택한다고 가정하면, 이것은'h1'에서만 작동합니다. 모두에 대해'.box * + h2'를 반복해야합니다. 당신이 그것을 피하고 싶다면 LESS 같은 것을 사용하는 것을 고려하십시오. –

+0

아마도'.box * + h1, .box * + h2' 등의 의미일까요? – Clive

+1

조쉬의 코멘트에 덧붙여, 현재 코드는 [여기] (http://jsfiddle.net/uhvnepem/)와 같이 모든 'h2'(그리고 다른 표제)를 선택할 것입니다. 'h1'에 대해서만 조합을 존중합니다. – Harry

답변

1

: this :

.box *+h1, .box *+h2, .box *+h3, .box *+h4, .box *+h6, .box *+h6 { 
    margin-bottom:0.35em; 
    margin-top:1em; 
} 

이 발생합니다. (나는 영향을받는 헤더를 녹색으로 만들었습니다.)

이전 코드는 div의 첫 번째 헤더뿐만 아니라 div 외에도 h2, h3 및 h4 태그를 모두 선택했을 것입니다. 예 : here

관련 문제