CSS 클래스 N 번째 자식 선택자

Question

여기 내 코드는 다음과 같습니다. fiddle

내가 잘못하고있는 것을 이해하지 못합니다. 나는이 줄 것을 발견

<label>City<font color="red">*</font>: <input type="text" name="city" id="city" /></label><br/> 

당신은 제거 할 경우 :

</label><br/> 

그것은, 어떤 이유로 작동합니다. 나는 이유를 모른다. 내가 뭘 잘못하고 있는거야? 감사합니다

편집 : 죄송합니다 무슨 일이 있었는지 언급하지 않았다. 첫 번째와 두 번째 제출 버튼의 스타일을 다르게하고 싶습니다. 그래서 두 번째 폼의 submit 버튼에 대해 nth-child selector를 사용했는데 어떤 이유로 2 번째 submit 버튼에 정확한 스타일 변경이 적용되지 않습니다. 내가 말했듯이, 당신이 위의 작품을 어떤 이유로 든 제거하면 작동합니다. 그것은 그 다음 작업 .. 다른 사람을 위해하지 않으면, 여러분의 인생을 더 쉽게 .. 를 사용하여 간단한 선택기 첫째 ..

다음 글꼴 태그를 사용하지 않는 만들면서

Answer 1

왜 당신은 버튼을 다른 클래스를 제공하지 않습니다 ..

input[type="submit"] 
{ 
    padding:4px 7px; 
    background:#CC0000; 
    border:0px; 
    position:relative; 
    top:0px; 
    border-bottom: 1px double #660000; 
    border-top: 1px double #660000; 
    border-left:1px double #FF0033; 
    border-right:1px double #FF0033; 
} 

.button1 
{ 
    margin:0 0 10px 0; 
    color: #FFF; 
    left:0px; 
    width:100px; 
} 

.button2 
{ 
    margin:0 0 5px 0; 
    color: #00F; 
    left:50px; 
    width:150px; 

} 

.error 
{ 
    color: red; 
} 

내가 .. 그런 다음 버튼 1, 단추 2 버튼에 대한 특정 속성을해야합니다 하나 개의 클래스로 모든 공통 속성을 배치 .. 스팬이를 교체하고 그것을 빨간색 글꼴이있는 오류 클래스를 제공 .. 문서에 반복적 인 스타일이 없기 때문에 코드를 훨씬 깔끔하게 정리할 수 있습니다. 중요한 당신은 잘못된 일을 많이하고있는이 FIDDLE

Answer 2

확인 만 :

레이블 요소는 최대 하나 개의 입력, 버튼, 선택, 텍스트 영역, 또는 Keygen은 자손을 포함 할 수 있습니다.

두 개의 입력 (이름 + 성)이 포함 된 레이블이 있습니다.

글꼴 태그를 사용해서는 안되며, 이유는 CSS입니다.

n 번째 자녀 문제 :

이 의사 클래스는 자식 요소의 부모 요소의 목록 내에서 자신의 위치를 ​​기준으로 요소를 일치합니다.

참조 : http://reference.sitepoint.com/css/pseudoclass-nthchild

를 사용하여 다른 클래스 나 ID를, 간단한 방법.

Answer 3

CSS 코드 : n 번째의 형 (2)이 div.box .button:nth-of-type(1)입니다 : div.box .button:nth-of-type(2)

하는 요소 div.box .button이 없습니다. 자세한 내용을 보려면 http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/ 링크를 방문하십시오.