모든 CSS 스타일링 순열과 조합을 다룹니다.

Question

저는 배포 용 웹 사이트 테마를 만들고 방금 보았던 것들을보기 위해 단위 테스트를 업로드했습니다. 그 중 하나는 중첩 된 블록 쿼트 (nested blockquotes) 였는데, 제 경우에는 맨 밑에 큰 차이가있었습니다. 내가

blockquote blockquote { 
margin-bottom:0; 
} 

스타일링하면 문제를 해결할 수 있었다 ... 그래서 나는 그 문제를 해결하지만 다른 밖으로 데리고 ... 내가 실현 누군가가 두 번째 인용구 다음 여백 후 일부 콘텐츠를 추가 할 수 있다면 것 외출 중이다. 나는 이것을 스타일링 할 수있을 것이라고 확신하지만 누군가 헤더, 프리, 코드 등을 같은 위치에두면 어떨까요? ... 그리고이 시나리오는 그저 블록 쿼트 (blockquote)로 또는 단지 코멘트에 나타나지 않습니다.

내 질문은 이것입니다. 배포 용 테마를 만들 때 모든 단일 순열 및 조합에 대해 스타일을 지정하거나 이렇게 할 수 있습니까?

Answer 1

이 특별한 경우에는 배경색이나 테두리도 있으면 더 멋지게 보일 것입니다. blockquote의 여백은 기본적으로 아래쪽에 있으므로 패딩 (padding) 바닥과 여백 바닥이 합쳐집니다.

이

p, blockquote, .other-margined-elements { 
    margin: 1rem 0; 

    &:first-child { 
     margin-top: 0; 
    } 

    &:last-child { 
     margin-bottom: 0; 
    } 
} 

생성 된 CSS :이 방법

p, blockquote, .other-margined-elements { 
    margin: 1em 0; 
} 

p:first-child, blockquote:first-child, .other-margined-elements:first-child { 
    margin-top: 0; 
} 

p:last-child, blockquote:last-child, .other-margined-elements:last-child { 
    margin-bottom: 0; 
} 

, 그것은 단지 문제 사용

말대꾸이 다루는

나의 현재 가장 좋아하는 방법은 매우처럼 목록에 추가 할 요소를 파악합니다. 현재 목록은 다음과 같습니다. h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, blockquote, div, 섹션, 기사, 옆으로, 필드 세트

다른 방법이 있습니다. 당신이 느끼는 경우에 위의 코드가 배 밖으로 조금 경우 : :first-child 및 :last-child 사이비 클래스에

blockquote > :first-child { 
    margin-top: 0; 
} 

blockquote > :last-child { 
    margin-bottom: 0; 
} 

덕분에, 모든 단일 조합을 쓸 필요가 없습니다.