CSS3的初识(一)

萌新彭于晏

于 2019-03-17 21:33:33 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/weixin_43555093/article/details/88627506

版权

css3的初识之兄弟选择器

1.兄弟选择器之相邻兄弟选择器
(1)基本语法:目标选择器+选择器
如选择div标签的相邻兄弟标签p:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
        div+p{
            color:red;
        }
    </style>
</head>
<body>
<div>我是div中的文字</div>
<p>我是p标签中的文字</p>
</body>
</html>

在这里插入图片描述

(2).匹配规则:在使用相邻兄弟选择器时只会选择目标选择器的下一个标签内容(紧挨着的那个),子代后代都不会匹配成功.

2.兄弟选择器之通用兄弟选择器
(1).基本语法:目标选择器~选择器1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x兄弟选择器</title>
    <style>
        div~p{
            color:blue;
        }
    </style>
</head>
<body>
<div>我是目标div</div>
<p>我是p标签1</p>
<p>我是p标签2</p>
<span>我是span</span>
<nav>
    <p>我是p便签3</p>
</nav>
</body>
</html>

在这里插入图片描述