2011-11-09 3 views
3

CSS에서 div.selector 및 selector가 특정 선택자에 대한 스타일 규칙을 정의하는 데 사용되는 것을 확인했습니다.div.selector 대 selector

두 가지의 차이점은 무엇이며 자신의 CSS 파일을 작성할 때 다른 것을 채택 할 때 고려해야하는 이유는 무엇입니까?

답변

9
  • div.selectorselector 대상의 종류 만 div 소자. .selector의 클래스
  • .selector이 목표 모든 요소가없는 태그 이름을 가진 단지 DIVs

그래서 접두사 요소 당신은 당신이 CSS를 적용됩니다 하나 알고 있다면. 이후 접근법은 일반이며 지정된 클래스를 가진 모든 요소를 ​​대상으로합니다. 그러나 가능한 경우 항상 이어야합니다.

는 특정 페이지의 모든 요소를 ​​찾습니다 결국에만 DIVs에 그 스타일을 적용합니다 성능 등 div.selector보다는 .selector의 측면에서 더 나은 것 만 div 요소 .selector 클래스이있을 것이다 알고있는 경우.

+1

는 성능면에서하지 낫다 : 아래

성능과 실천의 문제에 대한 몇 가지 유용한 링크입니다 클래스가 적용된 요소가이 경우 div 요소인지 확인합니다. 이 mozilla 기사는 다음을 강조 표시합니다. https://developer.mozilla.org/en/Writing_Efficient_CSS –

3

div.selector.selector보다 구체적인 선택기입니다.

<a href="" class="selector">Link</a> 
<div class="selector"></div> 

선택기 div.selector.selector 두 요소를 선택 사업부 일치 : 당신의 예를 들어

이 HTML이있다.

1

위에서 언급했듯이 클래스 앞에 요소 이름 (예 : div.selector)을 붙이면 div가 아닌 다른 요소는 제외됩니다. 이를 염두에두고 여러 요소에 적용 할 수있는 클래스를 만들거나 단일 요소를 대상으로 지정할 수 있습니다.

가독성 측면에서 클래스 앞에는 CSS가있는 요소를 식별하는 데 도움이됩니다. 그러나 일반적으로 모범 사례와 성능면에서 클래스 및 ID 선언 앞에 접두사를 사용하지 않는 것이 사용자의 브라우저 엔진에 대한 추가 작업을 유발하므로 일반적으로 권장됩니다.

클래스 앞에 접두어를 붙이면 (예 : div # selector 또는 div.selector) 브라우저가 클래스를 찾고 div 유형인지 식별해야합니다. 이 작업을 수행하는 데 필요한 시간은 무시할 수 있지만 아직 언급할만한 가치가 있다고 생각합니다. 브라우저의 렌더링 엔진을 확인하기 때문에 특정가는

https://developer.mozilla.org/en/Writing_Efficient_CSS 내 이해에서 http://css-tricks.com/efficiently-rendering-css/