후손 아이 CSS 선택기

Question

이의 내가 여기에 유사 할 수 있습니다 예를 에 대한 .logo라는 선택 클래스와 HTML의 사용을 가정 해 봅시다.

.nav .logo { 
    width: .. 
    height: .. 
} 

은 무엇 다음과 같은 하나의 선택 선언을 통해 도움이 될 것입니다 다음과 같이

<div class="nav"> 
    <a class="logo"></a> 
</div> 

나는 후손 하위 형식의 스타일들을 많이 볼?

.logo { 
    width: .. 
    height: .. 
} 

나는 HTML 마크 업 계층 구조를 응용 프로그램과 훨씬 정돈 될 것이라고 이해하고 또한 미디어 쿼리 조정과 확장 성을 도움이 될 것입니다하지만 많은 사람들이이 방식으로 구현 볼이 특정 로고 예로, 내가 너무 아니다 확실한 이점.

추가

나는 우선하는보다 구체적인되는 이해합니다. 나는 재사용 가능성에 대해 더 많은 의견을 쓴 것으로 보인다.

Answer 1

.nav .logo 또한 후자는 모든 요소 .nav .logo이 소자는 클래스 .nav을 갖는 요소 내에 중첩 .logo 데에 적용될 문서 .logo 데에 적용될 .logo

를 사용하여보다 구체적이다.

이 필요가 없습니다 경우 성능에 영향을 미치는뿐만 아니라 같이, 중첩 스타일을 피해야한다뿐만 아니라 당신은 이전을 대체 할 더 많은 특정 규칙을 작성 endup 것입니다. 이 경우

, 웹 사이트로 .logo을 사용할 가능성이 단일 로고를 가지고 있지만, 디자이너는 그가 자신의 클라이언트 로고 디렉토리 목록의 각 클래스 .logo있는 클라이언트 페이지를 디자인하고 어떤 경우 다시 말? 그래서이 경우 그는 자신의 사이트 로고 .nav .logo를 사용하고 그가 요소 내부에 랩 다른 .logo이 .client_list 그래서 그는이 경우 .client_list .logo을 사용하는 말을 가지고 말할 것이다.

Answer 2

자손의 사용은별로 좋은 생각이 아닙니다. 특정 컨테이너를 사용하여 .logo 클래스를 단단히 고정시키기 때문입니다.

<div class="nav"> 
</div> 
<a class="logo"></a> 

다른 이점은 당신이 다른 곳에서 동일한 스타일을 재사용 할 수 있다는 것입니다 : 나중에 마크 업을 변경하면 무슨 일이 일어날 것입니다. 예를 들어 바닥 글에 다른 .logo 클래스를 작성하는 대신. 에 대해 조금 더 읽어 보도록하겠습니다. 머리글과 바닥 글에 로고가있는 경우

다음과 같은 스타일로 끝낼 수 있습니다 : 당신은 몇 가지를 공유 일반적으로

<header> 
    <a class="logo logo-header"></a> 
</header> 
<footer> 
    <a class="logo logo-footer"></a> 
</footer> 

:

이

.logo { 
    background: url('...') no-repeat; 
} 
.logo-header { 
    background-size: 100px 50px; 
} 
.logo-footer { 
    background-size: 70px 40px; 
} 

그런 다음 다음과 같은 마크 업을 사용 머리글과 바닥 글 사이의 스타일은 있지만 두 장소에 대한 특정 CSS가 있습니다. 나는 훨씬 더 나은 접근법을 발견했다.

Answer 3

class="logo"으로 더 많은 요소를 가질 수 있으므로 .nav 요소 안에있는 요소 만 대상으로 지정하는 방법입니다. 다른 .logo은 혼자 남겨 둡니다. 물론

당신은 특히 a 특정 일, 당신은 aid가 고유하게하는 것을 제공 할 수 있습니다 대상으로합니다.