합니까 CSS 지원 상속

Question

가능한 중복 :
Inherit CSS class

는 CSS 지원 상속을합니까?

우리가 가정 :

.base 
{ 
} 

.class1 :base 
{ 
} 

.class2 :base 
{ 
} 

어떻게 class1 할 수 class2이 base에있는 모든 스타일을 포함?

Answer 1

CSS 단어의 클래스 의미에서 상속을 지원하지 않지만, 특이성 및 순서를 기반으로합니다. class1 및 class2 클래스에 대한 공통 속성 집합을 정의한 다음 필요에 따라 전문화하는 경우

.class1, .class2 
{ 
    font-size:1.1em; 
} 

.class1 
{ 
    color:red; 
} 

.class2 
{ 
    color:green; 
} 

Answer 2

CSS는 상속을 지원합니다. 당신이 HTML 태그처럼 배치하는 경우 :

<div class="base"> 
    ... 
    <div class="class1> 
     ... 
    </div> 
    <div class="class2"> 
     ... 
    </div> 
</div> 

클래스 1과 Class2의 당신이 명시 적으로 스타일 시트에서 재정의하지 않는 한베이스에 할당하는 어떤 스타일을 상속합니다.

.base { 
    font-size: 12pt; // all child elements get this font size if another font-size is not specified 
} 

자세한 내용은 w3.org을 확인하십시오.

Answer 3

아니요. 기본 클래스를 사용하고 요소에 두 클래스를 모두 추가하는 것보다 필요한 스타일로 다른 클래스 1과 클래스 2를 사용해야합니다. 예를 들어 :

.base 
{ 
color: Black; 
font-size: 12pt; 
} 

.class1 
{ 
font-weight: bold; 
color: Blue; 
} 
<div class="base">This will be black, 12pt.</div> 
<div class="base class1">This will be blue, 12pt, bold.</div> 

Answer 4

아니,하지만 몇 가지 도구는 CSS를 "컴파일"을 사용할 수 있습니다 (같은 SASS)이 있습니다. 예 :

SASS :

.error { 
    border: 1px #f00; 
    background: #fdd; 
} 
.error.intrusion { 
    font-size: 1.3em; 
    font-weight: bold; 
} 

.badError { 
    @extend .error; 
    border-width: 3px; 
} 

은 "컴파일"

이

.error, .badError { 
    border: 1px #f00; 
    background: #fdd; 
} 

.error.intrusion, 
.badError.intrusion { 
    font-size: 1.3em; 
    font-weight: bold; 
} 

.badError { 
    border-width: 3px; 
}