여러 요소에 대한 CSS 선택기 문제

Question

나는 내 CSS가 상당히 좋다고 생각했지만 왜이 문제가 발생하는지 파악할 수 없습니다. 나는 틀린 일을해야만합니다.

그래서 사업부에 자녀 여러 요소를 선택하려면 내가 쓸 수 :

#mydiv > input, label{ 

} 

내가 수정 있습니까? #mydiv라는 div에 있지 않더라도 내 사이트의 다른 입력 및 레이블이 CSS 속성을 상속 받았다는 것을 알기 전까지는 이것이 사실이라고 생각했습니다. 내가 사용했던 문제를 해결하려면 :

#mydiv > input, #mydiv > label { 

} 

을하지만이 그렇게 할 수있는 가장 빠른 방법이 아니라고 확신합니다. W3.org에서 Selector Page을 확인해 보았지만 제 상황에 대한 예를 보여주지 못했습니다.

내가 뭘 잘못하고 있니?

Answer 1

맞습니까?

번호 The grouping selector (쉼표)는 가장 낮은 우선 순위를 가지고, 그래서 당신은이 셀렉터를 사용하여 사업부의 자녀 여러 요소를 선택하는 데 사용할 수 없습니다 : 가장 간결 선택은 하나

#mydiv > input, label 

입니다 당신은 당신의 자신에 발견 :

#mydiv > input, #mydiv > label 

---

당신은 중첩 된 규칙을 사용하여 일까지 조금 건조 할 수을에또는 Sass이지만 코드 및/또는 빌드 프로세스에 종속성을 도입합니다.

Answer 2

두 번째 스 니펫은 순수한 CSS로 만드는 가장 간단한 방법입니다. 쉼표 ,은 분리 된 CSS 선택자를 분리하므로 두 선택자 모두 각각 #mydiv으로 시작해야했습니다.

당신은 nested rules을 허용 할 LESS 같은 것을 사용할 수 있습니다. 비 밀접한 예 :

#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

하지만 순수 CSS와 떨어져 아마 더 좋을 것 같아. 어떻게 든이 쉼표로 구분 된 여러 선택기를 사용하지 않고 할, 당신이 당신의 입력 및 레이블 요소 모두에 대한 클래스 이름을 사용할 수 있습니다 싶었다면

Answer 3

두 번째 방법은

#mydiv > input, #mydiv > label { 

} 

좋은

.your-class-name { 

} 

또는 #mydiv에 대해 입력 및 레이블이 두 가지 유형의 하위 요소 인 경우 다음과 같이 범용 선택기를 사용할 수 있습니다.

#mydiv > * { 

}