2014-07-21 1 views
-2

을 (의견이 필요) 나는 그 CSS 클래스를 선택할 수있는 옵션이 있습니다어느 쪽을 사용해야합니까? CSS 클래스

.container> div > table.Test> tbody > .header 

그리고

.header 

일부 CSS 스타일을 추가 할 수 있습니다. 나는 이것에 대해 알고 싶습니다 무엇

은 다음과 같습니다

  1. 의 주요 차이점은 무엇입니까?

  2. 어떤 것을 사용 하시겠습니까? 그 이유는 무엇입니까?

  3. 둘 사이의 성능에는 차이가 있습니까?

감사합니다.

+1

FAQ를 읽어보십시오. – duffymo

+0

차이점은 HTML과 CSS가 어떻게 구성되어 있는지에 따라 다릅니다. 첫 번째는 두 번째를 우회 할 수있는보다 구체적입니다. [CSS 특이성] (http : //www.smashingmagazine.com/2007/07/27/css-specificity-things-you-know-/)에 대해 자세히 알아보십시오. 나는 모든 것을 단순하게 유지하는 것을 선호합니다, [키스 원리] (http://en.wikipedia.org/wiki/KISS_principle). 그러나 다시 말하지만 나머지 코드에 따라 다릅니다. – LinkinTED

답변

2

우선, 질문은 의미가 없습니다.

설명 :

1.What는 주요 차이점은 무엇입니까?

div#container > ul 
{ 
    border: 1px solid black; 
} 

표준 X, Y 및 X> Y의 차이는 후자는 직접 아이들을 선택하는 것입니다. 예를 들어, 다음 마크 업을 고려하십시오.

<div id="container"> 
    <ul> 
    <li> List Item 
    <ul> 
     <li> Child </li> 
    </ul> 
    </li> 
    <li> List Item </li> 
    <li> List Item </li> 
    <li> List Item </li> 

#container의 선택> UL 만 용기의 ID와 DIV 직접 자식 인 ULS를 타겟팅

. 예를 들어 첫 번째 li의 자식 인 ul을 대상으로하지는 않습니다.

.header 
{ 
} 

클래스 헤더가있는 모든 요소를 ​​대상으로합니다.

#container > div > .header 
{ 
} 

직접적으로 #container 아래에있는 div 아래에 배치 된 모든 헤더 요소를 대상으로합니다.

2. 사용하고자하는 이유는 무엇입니까?

주로 필요에 따라 다릅니다. 모든 헤더 요소를 타겟팅하려는 경우 (즉, 동일한 클래스의 .header가있는 테이블이 여러 개있을 수 있음) 모든 헤더에 스타일을 적용하려면 두 번째 방법을 사용할 수 있습니다. 다른 방법으로 첫 번째 방법을 사용하십시오.

3.Performance는

나는 확실하지 않다. 성능 문제가 없습니다.

관련 문제