兄弟选择器和相邻兄弟选择器

1.兄弟选择器(brother selector,BS):BS是CSS3.0新增的一个选择器,语法格式:A~B{...}(A、B为HTML元素/标签,表示A标签匹配selector的A,B标签匹配selector的B时,B标签匹配样式)
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>兄弟选择器</title>
    <style type="text/css">
        h1~p{
            color:red;
        }
    </style>
</head>

<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果如下图所示:


2.相邻兄弟选择器(Adjacent sibling Selector)可选择紧接在另一个元素后的元素,且二者具有相同的父亲元素。相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。



<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>

<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

效果如下图所示:


猜你喜欢

转载自blog.csdn.net/qq_33457248/article/details/79694217