css 相邻兄弟选择器实例讲解

时间:2016-06-25
css 相邻兄弟选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。本文章向大家介绍css 相邻兄弟选择器的使用方法和实例。

CSS 相邻兄弟选择器:element+element选择器用于选择（不是内部）指定的第一个元素之后紧跟的元素。

语法

CSS 相邻兄弟选择器语法结构图如下：

CSS 相邻兄弟选择器语法

在这里注意一点，相邻选择器的操作对象是该元素的同级元素。

实例

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #lv+div{color:red;}
    </style>
</head>
<body>
    <div>码农教程</div>
    <div id="lv">
        <p>码农教程</p>
    </div>
    <div>码农教程</div>
    <div>码农教程</div>
</body>
</html>

运行结果如下：

css 相邻兄弟选择器实例

分析：“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div，也就是第3个div元素。

随机文章
WEB前端知识点必读
最近更新