CSS 가장 좋은 방법

나는 다음과 같은 스타일이 있습니다CSS 가장 좋은 방법

.alert { 
    position: relative; 
    border: 0; 
} 

.modal .modal-dialog .modal-content { 
    border-radius: 6px; 
    padding: 20px 20px 0 20px; 
}

이 적용됩니다 :

<div class="modal"></div>

내가 이런 일에 대해 서로 다른 스타일을 갖고 싶어

<div class="modal alert"></div>

하지만 그 스타일이 다른 요소에 적용되기 때문에 .alert을 적용하고 싶지 않습니다. 나는 적용된 .alert 스타일을 얻을

.modal .alert .modal-dialog .modal-content { 
    border-radius: 15px; 
    background-color: #F3F3F3; 
    padding: 0px 10px 0 5px; 
}

을하지만 :

나는이 일을하고 있습니다.

단서가 있습니까?

출처

2017-01-08 VAAA

사용'.modal.alert .modal-대화 .modal 콘텐츠 {'- modal'와'alert' ... – kukkuz

그것은'해야'사이에 공백이없는 점에 유의 .modal.alert' 나는 2 클래스의 컨테이너를 호출 할 때 믿습니다 –

그냥 내 질문을 업데이트하면 뭔가 빠졌어요. – VAAA

당신이 .alert의 스타일을 상속하지 .modal.alert을 원하는 경우에 당신은 .alert 스타일 정의를 지정해야합니다 : @cale_b이가 다른 클래스 이름을 지정하는 것이 좋습니다 댓글

.alert:not(.modal) { 
    position: relative; 
    border: 0; 
}

.modal.alert이므로 :not() 선택자를 포함 할 필요가 없습니다. 예를 들어

: <div class="modal modal_alert"></div>

출처

2017-01-08 14:49:18 Alvaro

이것은 정확하다. 그러나 내 경험상, 이것은 지저분해질 수있다. 나는 OP가 스타일/클래스 아키텍처를 다시 생각할 필요가 있다고 생각합니다. –

당신은 맞습니다 @cale_b, 대답이 업데이트되었습니다. – Alvaro

CSS 가장 좋은 방법

답변

관련 문제