CSS相邻兄弟选择器--“+”加号选择器:
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> h1 + p {margin-top:50px;color:red;} </style> </head> <body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> </body> </html>
运行结果:
兄弟选择器只会印象下面的p标签的样式,不影响上面兄弟的样式。
注意这里的’+’的意义跟’and’意义不一样,兄弟选择器的样式是应用在兄弟元素上,跟参照的元素样式无关,如上例只影响p元素的样式,而不影响h1标签的样式。
当然这个也会循环查找,即当两个兄弟元素相同时,会一次循环查找:
<!DOCTYPE HTML> <html> <head> <style type="text/css"> li + li {font-weight:bold;color:red;} </style> </head> <body> <div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div> </body> </html>
运行结果:
可以看出第一个li字体颜色没有变红,第二个和第三个元素字体变红,这就是因为第三个li是第二个li的兄弟元素,所以也会应用样式。