css 3에서 하나 이상의 클래스 선택하기

Question

오늘 나는 발견 한 샘플 코드를보고 개발자가 두 개의 클래스를 선택하기 위해 ","대신 "+"를 사용한다는 것을 알아 차 렸습니다.

.region + .region{ 
    border-left: 1px solid lightgray; 
    padding-left: 3.5%; 
    margin-left: 4%; 
} 

"+"기호는 ","은 무엇을합니까? 왜 그걸 쓸거야? 흥미롭게도 같은 클래스가 두 번 선택되었습니다. 왜? 여기

는 http://codepen.io/adobe/pen/vKixh

임은 CSS3을 배우고 어떤 도움을 주시면 감사하겠습니다 ... 코드 펜에 대한 링크입니다. 감사합니다

Answer 1

+의 수와 ~의 수 있습니다 형제

<div> 
    <div class="c"></div> 
    <div class="x"></div> 
    <div class="y"></div> 
</div> 

만 DOWNWARDS WORKS "x"CSS 스타일을합니다 .c + div {}을 사용하는 것입니다!

는의 여러 클래스 모두 "c" 및 "x" 같은 방식으로 스타일을합니다 .c, .x {}를 사용

<div> 
    <div class="c"></div> 
    <div class="x"></div> 
</div> 

된다.

없음 공간이 더 많은 조건 스타일을합니다 .c.x {}를 사용

<div> 
    <div class="c x"></div> 
    <div class="c"></div> 
    <div class="x"></div> 
</div> 

을 의미 "c x"

Answer 2

그들은 동일하지 않습니다!

+은 인접 선택자입니다. .region 요소를 .region 요소 다음에 선택합니다.

쉼표

따라서, 단순히 여러 클래스로 스타일링 한 블록을 적용 할 수 있습니다로 구분 된 목록 :

.region, .region{} 

실제로 어떤 작업을 수행하지 않을까요 그 자체가 바로 .region{} wouldnt한다.

인접성 선택기 (MDN article)

(+) 이는 인접한 선택이라한다. 이전 지정된 요소 바로 다음에 지정된 요소 만 선택합니다. 마음에

이

, .region + .region{}은 다른 후 .region에 스타일을 적용하고, NOT 격리 한, 또는 최초의 것이다. 이 인접 때만이 바로 형제 선택기 (또는 인접 선택기) 때문에 +는 완전히 다른 의미를 가지고, 그래서 당신의 규칙은 .region 요소를 일치 :

Answer 3

이 하지이 , (쉼표)에 대한 대안 표기법입니다 다른 이전의 .region 요소로.

여러 첫 번째 제외한 모든 .region 요소를 일치이

<div class="region">...</div> 
<div class="region">...</div> 
<div class="region">...</div> 
<div class="region">...</div> 

.region + .region 같은 .region 요소를, 형제 한 경우.

이것을 CSS2 선택하기 때문에, 이에 상응하는 CSS3 선택이 .region:nth-child(n+1)