2013-09-05 2 views
0

두 클래스의 속성을 사용하여 div를 만들려고합니다.두 클래스가 작동하지 않습니다.

CSS의 : 나는 다음과 같은 시도는 클래스에 .form.small

에 속하는 할

.form { 
    width: 290px; 
    border: 1px solid #D6D6D6; 
    background-color: #F9F9F9; 
    font-size: 18px; 
    color: #767676; 
    padding-top: 10px; 
    padding-right: 4px; 
    padding-bottom: 6px; 
    padding-left: 3px; 
    border: 1px solid #d5d5d5; 
    color: #333; 
    border-radius: 4px 4px 4px 4px !important; 
    height: 25px; 
} 
.form .small{ 
    height: 5px; 
} 

html로 : 결국

<input name="name" class="form small" title="Username" maxlength="2048" /> 

의 높이 입력이 5px로 변경되지 않지만 25px로 유지됩니다. 나는임이 잘못되었음을 정말로 모릅니다.

답변

9

현재 쓰여져 있으므로 .small 클래스를 가진 요소를 대상으로 지정하려고합니다.이 요소는 클래스가 .form 인 요소의 하위 요소입니다. 제대로 대상으로 함께 두 가져와 :

.form.small { 
    height: 5px; 
} 

을 그냥 참조를 위해, 당신은 그것을 쓴,이 같은 목표를 시도 할 것입니다 :

<div class='form'> 
    <div class='small'></div> 
</div> 
+0

호기심에서 HTML의'form' 클래스 안에'small' 클래스를 어떻게 사용 하시겠습니까? – LS97

+1

@ LS97 업데이트보기 – kunalbhat

1

귀하의 CSS는 요소를 찾고를 그 form

변경이 타르를 들어 .form.small

1

에 클래스의 자손 인 클래스 small있다 내가이 일을 생각하는 미래의 편집에 geting이 가장 좋습니다 :

CSS :

.from+small { 
//Code of .from 
//Code of .small 
} 

HTML :

<div class="from+small"></div> 

우리는 .from.last 규칙을 결합 CSS 규칙을 생성 할 그래서 그것은 미래의 편집에 도움이 될 것입니다.

관련 문제