다른 요소 스타일에 동일한 클래스 이름을 사용할 수 있습니까?

Question

다른 스타일의 요소에 동일한 클래스 이름을 사용할 수 있습니까? 예를 들면 :

table.dom { 
    background-color: #F9FAFA; 
    float: right; 
    border-collapse: collapse; 
    display: inline-block; 
    width: 352px 
} 
th.dom { 
    background-color: #8FA4AD; 
    color: #fff; 
    font-size: .8em; 
    padding: 8px 0; 
    border: #2C3A44; 
    border-width: 1px; 
    border-style: solid; 
    width: 88px; 
} 
td.dom { 
    font-size: .7em; 
    border-color: #313841; 
    background-color: #F9FAFA; 
    border-width: 1px; 
    border-style: solid; 
    height: 30px; 
    } 

나는 다른 요소에 대한 'DOM'클래스를 호출하는 경우,이 충돌을 일으키지 않을 것이라고 가정?

Answer 1

네, 괜찮습니다. 원한다면 .dom의 공유 속성을 공유 할 수 있습니다.

을 편집에 의해 하위 요소를 모든 요소에 클래스를 적용 할 테이블이 클래스가 후에는 타겟팅 할 필요가 없습니다,하지만 : 내가 아는 한 지금까지에 대한

table.dom th { 
    /*Style info*/ 
} 
table.dom td { 
    /*Style info*/ 
} 

Answer 2

, 그렇습니다 충돌을 일으키지 않습니다. 당신이 그렇게 같은 다른 선택이있을 경우

그러나 :

.dom { 
    font-weight:bold; 
    ... 
} 

스타일은 클래스 명 dom

Answer 3

물론 벌금 모든 요소에 적용되는이 정의. 갈등을 일으키지 않습니다.

Answer 4

그렇지만 셀렉터에서 태그를 타겟팅하는 것과 다른 점은 무엇입니까?

당신이 그 태그의 특정 지역을 대상으로 할 경우, 당신은 그들에게 용기를 줄 수 있으며이 의미에 대해, 당신은 단지 다른 클래스의 이름을 사용한다 만약 .details th {...} .details td {...}

처럼 대상. 예 : .detail-header {...} .detail-value {...}

Answer 5

가독성과 유지 관리를 위해 이러한 연습을 피할 것입니다. 그러나 산 테스트의 대상이 아닌 영역에서 한 릴리즈에서 다음 릴리스까지 일관성을 유지하려면 Microsoft와 같은 브라우저 제조업체에 의존해야합니다. 규칙에 의한 규칙은 td.dom이 그것이 작동해야한다는 것을 의미하는 .dom보다 더 특이성이있다. th.dom은 "오른쪽 td.dom의 규칙을 넘어서는 안됩니다."

산 시험 표준 접근 방식은 컴팩트 HTML과 CSS에

table.dom th {} 

결과입니다.

산성 테스트를 거친다는 것은 작동하지 않는다면 브라우저의 결함을 의미하지만 어느쪽으로 든 고칠 수있는 사람이 될 것입니다.

Jquery 등은 모두 산으로 테스트 한 CSS 구조를 사용합니다.

업데이트 : 브라우저 스니핑이라는 완전히 새로운 유전자를 열 수있는 특정 브라우저에서 작동하지 않는 경우.