앵커를 올리면 모든 형제를 스타일 지정합니다.

Question

호빗에 올 때 <a> 뒤에 모든 노드의 스타일을 지정하려고합니다. CSS 코드는 여기에

a:hover + p { 
    background: #ffbbff; 
} 

<a href="#">test</a> 
<p>Is styles</p> 
<p>Is not styled</p> 
<p>Is not styled</p> 
<p>Is not styled</p> 
<p>Is not styled</p> 

입니다

HTML 코드가되는 것은 Fiddle입니다. 문제는 바로 첫 형제가 스타일이 잡힌다는 것입니다. 내가 놓친 게 있니?

Answer 1

을 . +은 adjacent siblings을 선택합니다. 당신은 general sibling selector~ 사용할 필요가 : 당신이 원하는 경우

a:hover ~ p { 
    background: #ffbbff; 
} 

See this demo.

당신이 선택기를 결합도 수에 :

a:hover ~ p { 
    background: #ffbbff; 
} 

a:hover + p { 
    background: #ffffbb; 
} 

See this demo.

Answer 2

는 + 바로 인접 형제 선택 ~ (General sibling combinator)

a:hover ~ p { 
    background: #ffbbff; 
} 

http://jsfiddle.net/bKvMw/1/

Answer 3

보십시오. 당신은 ~

당신은 일반 형제 선택이 필요 General sibling selectors

Answer 4

대 Adjacent sibling selectors을 참조 사용하려는, +는 인접 형제 선택

입니다 이것보십시오 : 당신은 잘못된 선택을 사용하는

a:hover ~ p { 
    background: #ffbbff; 
}