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

作者：huangqiqing123 字体：[增加减小] 来源：互联网时间：2017-08-06

本文主要包含CSS,选择器等相关知识,huangqiqing123 希望在学习及工作中可以帮助到您

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

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

CSS代码：

li+li { font-size: 50px; }

1、如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
2、相邻兄弟选择器使用加号“+”做为连接符。

示例

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

2016712114934794.png (268×203)

您可能想查找下面的文章:

相关文章

2017-08-06玩转CSS3色彩
2017-08-06CSS实现自适应宽度的菜单按钮效果代码
2017-08-06css 列表菜单的设计
2017-08-06详解CSS3选择器的使用方法汇总
2017-08-06css float浮动属性的深入研究及详解拓展(一)
2017-08-06使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2017-08-06移动互联网网设计之碎片时间里的高效设计
2017-08-06CSS中的空白效果属性使用小结
2017-08-063个比较有用的网页制作技巧
2017-08-06滚动视差效果background-attachment实战记录

文章分类

最近更新的内容