可选择紧接在另一个元素后的元素,且二者有相同的父级元素 下面代码中,item2和item3会有效果,而item1不会有 HTML代码: XML/HTML Code 复制内容到剪贴板 ul li item1 / li li item2 / li li item3 /
可选择紧接在另一个元素后的元素,且二者有相同的父级元素 下面代码中,item2和item3会有效果,而item1不会有
HTML代码:
- <ul>
- <li>item1</li>
- <li>item2</li>
- <li>item3</li>
- </ul>
CSS代码:
CSS Code复制内容到剪贴板- li+li { font-size: 50px; }
1、如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。
示例
XML/HTML Code复制内容到剪贴板- <html>
- <head>
- <style type="text/css">
- #p1 + p {
- margin-top: 50px;
- }
- </style>
- </head>
- <body>
- <p id='p1'>This is paragraph 1.</p>
- <p id='p2'>This is paragraph 2.</p>
- <p id='p3'>This is paragraph 3.</p>
- <p id='p4'>This is paragraph 4.</p>
- </body>
- </html>