兄弟选择器（+和~）

最新推荐文章于 2024-03-06 12:01:45 发布

Solitude-xw

最新推荐文章于 2024-03-06 12:01:45 发布

阅读量196

点赞数

分类专栏： web

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1. + 选择器

　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
　　
　　比如：

<style type="text/css">
    h1 + p {
        margin-top:50px;
        color:red;
    }
</style>


<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>

 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14

　　效果如图：
　　这里写图片描述
　　兄弟只会印象下面的p标签的样式，不影响上面兄弟的样式。
　　注意这里的’+’的意义跟’and’意义不一样，兄弟选择器的样式是应用在兄弟元素上，跟参照的元素样式无关，如上例只影响p元素的样式，而不影响h1标签的样式。
　　当然这个也会循环查找，即当两个兄弟元素相同时，会一次循环查找：
　　示例：
　　

<style type="text/css">
    li + li {
        color:red;
    }
</style>

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
</div>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

　　效果：
　　这里写图片描述
　　可以看出第一个li字体颜色没有变红，第二个和第三个元素字体变红，这就是因为第三个li是第二个li的兄弟元素，所以也会应用样式。

　　２. ~ 选择器
　　作用是查找某一个指定元素的后面的所有兄弟结点。
　　示例代码：
　　

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

　　运行结果：
　　

　　这里写图片描述

Solitude-xw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兄弟选择器（+和~）

1. + 选择器　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。　　　　比如：style type="text/css"> h1 + p { margin-top:50px; color:red; }style>body>p>This is paragraph.p>h1>T
复制链接

扫一扫