어린이들과 함께 여러 요소를 코딩하는 선 (선)

나는 선 (禅) 코딩을 시도하고 있으며, 나는 주변에 누워있는 일부 HTML 코드를 복제하는 것처럼 보이지 않는다.어린이들과 함께 여러 요소를 코딩하는 선 (선)

<div class="home-page container clearfix news-article"> 
    <div class="box-round"> 
     <div class="cn tl"></div> 
     <div class="cn tr"></div> 
     <div class="br-title"><span></span></div> 
     <div class="br-content pad15 clearfix"> 
      <cfoutput>#event.getView("data")#</cfoutput> 
     </div> 
    </div> 

</div>

내가 지금까지 무엇을 가지고 :

여기에 코드입니다

div.home-page.container.clearfix.news-article > div.box-round > div.cn.tl + div.cn.tr + div.br-title > span

을 그리고 난 자식 요소를 가지고 각각의 여러 항목을 확대에 붙어 곳 같아요.

는 특히 내 <div class="br-title">있는 자식 요소가 빈 <span></span>하지만 그것도 자체가 자식 요소를 가지고있는 "형제"요소 <div class="br-content pad15 clearfix">있다 (나는 선에 복제 할 수 있는지 확인하기 위해 추가).

모든 조언을 주시면 감사하겠습니다. 나는 예제를 찾아서 아무런 성공없이 해결하려고 노력했기 때문에 어떻게 할 수 있는지 궁금하다.

출처

2013-05-24 mlnyc

이렇게하는 방법은 몇 가지가 있으며 하위 선택자로 요소를 괄호로 묶거나 상위 연산자 ^) :

1. 괄호 ()

당신의 "흐름"젠 코딩 조각을 파괴하지 않도록하는 좋은 방법입니다. SO 게시물을 this 참조하십시오.

(div.br-title > span) + (div.br-content > cfoutput)

전체 발췌문 :

div.home-page.container.clearfix.news-article > div.box-round > div.cn.tl + div.cn.tr + (div.br-title > span) + (div.br-content > cfoutput)

2. 부모 운영자 ^

또 다른 옵션, 세르게이로 (당신은 아마 그를 믿을 수 있도록 그는, 개미의 창조자이다)) 코멘트에 지적했다.

.br-title>span^.br-content>cfoutput

전체 발췌문 :

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+.br-title>span^.br-content>cfoutput

추가 참고

당신의 .class 이름 앞에 div을 포함 할 필요가 당신은 .classname를 사용할 수 있으며 개미는 사업부를 포함, 없다 (다른 요소를 지정해야 함). 더 간결한 선 코딩 스 니펫은 다음과 같습니다.

.home-page.container.clearfix.news-article>.box-round>.cn.tl+.cn.tr+(.br-title>span)+(.br-content>cfoutput)

출처

2013-05-24 17:06:38

Emmet * is * Zen Coding : – BoltClock

@BoltClock 좋은 점. Emmet은 Zen Coding의 후계자이지만 일부 사람들은 아직 악 대차에 뛰어 들지 않았습니다. OP의 Zen Coding 스 니펫은 Emmet에 직접 복사/붙여 넣을 때 작동하지 않으므로 잘 모르겠습니다. 내가 명확하게하기 위해 내 게시물을 업데이 트했습니다. –

또 다른 옵션은 ^^ 연산자를 사용하는 것입니다 : .br-title> span^.br-content> cfoutput' –

어린이들과 함께 여러 요소를 코딩하는 선 (선)

답변

관련 문제