CSS样式之组合选择符

一:前言

今天笔者在看CSS的组合选择符部分,发现后代选择器和子选择器、相邻兄弟选择器和后续兄弟选择器概念有点难理解,笔者就做了一些实验,然后明白了。
运行环境:菜鸟教程的CSS页面(笔者发现这里真的方便,帮你写了主框架,然后,要写什么效果都可以直接跑出来。简单的前端知识学习都可以在这里进行。)

二:操作

1.后代选择器和子选择器:
后代选择器是以空格分割的(例子:A空格B),获取A标签下所有B标签。
子选择器是是以大于号分割的(例子:A大于号B),获取A标签下的子标签B。
实验:

后代选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div p
{
	background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>test 1。 在 div 中。</p>
<p>test 2。 在 div 中。</p>
</div>
<p>test 3。不在 div 中。</p>
<p>test 4。不在 div 中。</p>
</body>
</html>

运行效果:
CSS样式之组合选择符_第1张图片
div里面的p标签都变色了。


```c
子选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div>p
{
	background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>这个p的爸爸是div</p>
</div>
<div>
<span><p>这个p的爸爸是span,爷爷是div</p></span>
</div>
<p>这个p没有爸爸也没有爷爷</p>
</body>
</html>

运行效果:
CSS样式之组合选择符_第2张图片

div里面的子p标签变色了,孙p标签没有变色。

2.相邻兄弟选择器和后续兄弟选择器(后续也称普通,所以也叫普通兄弟选择器)
相邻兄弟选择器是以加号分割的(例子:A加号B),A标签和B标签有相同父标签,A标签和B标签是紧接的,选取第一个B标签。
后续兄弟选择器是是以破折号(“就是这个~,按下Shift同时按F1左下角的有小波浪的键就可以得到”)分割的(例子:A破折号B),A标签和B标签有相同父标签,A标签和B标签是紧接的,选取紧接的所有B标签。
实验:

相邻兄弟选择器:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div+p
{
	background-color:#00ff99;
}
</style>
</head>
<body>
<div>
<p>div里面的p(完全没机会)</p>
</div>
<p>与div相邻的第一个p(天选之子)</p>
<p>与div相邻的第二个p(差了一点呀)</p>
</body>
</html>

运行效果:
div3
就一个相邻的p标签被选中

后续兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>testdemopage</title> 
<style>
div~p
{
	background-color:#00ff99;
}
</style>
</head>
<body>
<div>
<p>div里面的p(完全没机会)</p>
<p>div里面的p(完全没机会)</p>
</div>
<p>与div相邻的第一个p(天选之子)</p>
<p>与div相邻的第二个p(天选之子)</p>
<span>
	<p>因为电灯泡span,失去了机会</p>
</span>		
</body>
</html>

运行效果:
CSS样式之组合选择符_第3张图片
紧接的相邻的p标签都被选中

三:尾言

CSS样式有些内容要认真看,它不难,但是需要细心。
还有,菜鸟教程真是个学HTML、CSS、JS的好地方,我爱菜鸟教程。

你可能感兴趣的:(前端)