相邻兄弟选择器:
格式:
标签1+标签2{
属性:值;
}
相邻兄弟选择器只能选择相邻的兄弟级别的标签。如:标签1+标签2的意思是:标签2是标签1的相邻的紧挨着的,是在标签1下面的,而且是标签1兄弟级别的标签。
相邻兄弟选择器只会选择相邻的兄弟,不会选择其他的兄弟标签。
例子:
把相邻着<h1>标签的所有的<p>标签中的内容都修改成红色。
例一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器</title>
<base target="_self">
<style type="text/css">
h1+p{
color: red;
}
</style>
</head>
<body>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
例二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器</title>
<base target="_self">
<style type="text/css">
h1+p{
color: red;
}
</style>
</head>
<body>
<h1>我是段落</h1>
<a href="#">超链接</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
对比上面两幅图片,理解相邻兄弟选择器。
通用兄弟选择器:
格式:
标签1~标签2{
属性;值:
}
1.标签1下面的,所有的名字叫做标签2的兄弟级别的标签都会被改变和修饰。
2.标签1下面的,id名或class类名或标签名叫做标签2的标签会被修饰。
3.通用兄弟选择器不单单只改变相邻的兄弟标签,只要是下面的(相对而言),而且满足条件的,都会被查找到,然后进行修饰。
例子:
使类名为xxx的标签中的内容变成红色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>兄弟选择器</title>
<base target="_self">
<style type="text/css">
h1~.xxx{
color: red;
}
</style>
</head>
<body>
<h1>我是段落</h1>
<p>我是段落</p>
<p class="xxx">我是段落</p>
<p>我是段落</p>
<h1>我是段落</h1>
<p>我是段落</p>
<p>我是段落</p>
<p class="xxx">我是段落</p>
</body>
</html>
相邻兄弟选择器与通用兄弟选择器:
(1)相邻兄弟选择器:只能选择相邻的,不能选择其他的兄弟标签。如:标签1+标签2{属性:值;} 标签2就是标签1的相邻的,下面的,兄弟级别的标签。
(2)通用标签选择器:能够选择所有的兄弟标签,也能够选择我们自己想要选的兄弟标签。如:标签1~标签2{属性:值;} 系统先从标签1下面找到所有的属于标签1的兄弟标签,然后再从这些所有的兄弟标签中找到id名或class类名或标签名是标签2的标签,最后将其进行修饰。