CSS的相邻兄弟选择器用法简单讲解

code • 2022-4-15 • html-js-css • 阅读 40

CSS的相邻兄弟选择器用法简单讲解

可选择紧接在另一个元素后的元素，且二者有相同的父级元素下面代码中，item2和item3会有效果，而item1不会有
HTML代码：

XML/HTML Code复制内容到剪贴板

<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>

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/618247.html

css 选择器

打赏

微信扫一扫

支付宝扫一扫

code 管理员组

关于负margin的一些应用

上一篇 2022-04-15

对行内元素和块级元素的一些认识

下一篇 2022-04-15

发表评论

登录后才能评论

评论列表（0条）