当前位置: 代码迷 >> HTML/CSS >> 应用CSS3样式相邻选择器
  详细解决方案

应用CSS3样式相邻选择器

热度:153   发布时间:2012-09-09 09:27:54.0
使用CSS3样式相邻选择器

使用 (+)符号。

?

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h2 +  p {
            color: red;
        }
		
    </style>
</head>
<body>
 
    <h1>h2+p CSS test</h1>
    <h2>[s1] Section 1</h2>
    <p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac rhoncus mauris. Vivamus augue odio, placerat in semper nec, rutrum ac purus.</p>
    <p>2) Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In eu nisl elit, eget sagittis enim. Ut porttitor orci mauris.</p>
    <p>3) Phasellus pretium, arcu at varius posuere, magna est venenatis urna, et congue dolor lectus vel dui.</p>
 
    <h2>[s2] Section 2</h2>
    <p>1) Mauris at iaculis nisl. Proin ultricies laoreet sem, nec egestas enim porta in. Proin magna dui, tincidunt elementum semper consequat, semper quis dolor. Nullam enim massa, vestibulum ut scelerisque nec, congue eu nibh.</p>
    <p>2) Nulla facilisi. Aenean ullamcorper dictum dolor in posuere. Duis lorem dolor, aliquet in vestibulum id, adipiscing non velit.</p>
 
    <h2>[s3] Section 3</h2>
    <p>1) [s3 p1] Cras tincidunt euismod velit sit amet consectetur. Maecenas eget est felis, et viverra metus.</p>
    <p>1) [s3 p2] Nullam in turpis et enim luctus consequat. Ut enim magna, pulvinar vel porta a, molestie nec risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce a ipsum metus, a convallis quam. Cras elementum ullamcorper nisl, quis porta neque vehicula sed.</p>
 
</body>
</html>

?源码下载:

siblingselectors.zip