DIV+CSS基础子元素选择器,相邻元素和同级元素选择器

子元素选择器,相邻元素和同级元素选择器

关于CSS中的选择器,很多初学者容易混淆,本文大致讲述一下几种不同的选择器,在CSS中可以通过上下文关系来应用某项定义,例如:

<div class="top">
<p>周杰伦,1979年1月18日出生于台湾新北市</p>
<p>林俊杰,1981年3月27日出生于新加坡</p>
<p id="leong">梁静茹,1978年6月16日出生于马来西亚</p>
</div>

假如定义p {color:red},则表示文档中所有的段落都是红色,但如果我们定义.top p {color:red},则只表示top类中的段落为红色。如果定义.top p#leong {color:red} ,则只会第三个标有对应id的段落显示为红色。

因此,我们并不需要给每个html元素加上id或class,例如:

<div id="header">
<ul class="a">
<li>项目一</li><li>项目二</li><li>项目三</li>
</ul>
<ul class="b">
<li>产品一</li><li>产品二</li><li>产品三</li>
</ul>
</div>

上例中的li列表项目没有分别定义class,但我们可以使用.a li 和.b li 两个选择器分别定义它们的样式,这种选择器的写法一般成为后代选择器。

子元素选择器

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,那么可以使用子元素选择器,例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
h3>span {color:red;}
</style>
</head>
<body>
<h3>腾讯<span>微信</span>团队发布声明,强调<span>微信</span>绝不会对用户收费</h3>
<h3><em>2016年9月21日,<span>微信</span>小程序正式开启内测</em></h3>
</body>
</html>

浏览这个网页,我们会发现第一行中span内文字显示为红色,而第二行中span内文字没有改变颜色。

CSS子元素选择器.png

上例中的子选择器使用了大于号,h3>span表示作为h3子元素的span选择器,如果将例子中的h3>span改为h3 span,则第二行中的span内文字也会改变颜色,注意体会这个“子元素”的含义。

相邻元素选择器

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
h3+p {color:red;}
</style>
</head>
<body>
<h3><em>2016年9月21日,<span>微信</span>小程序正式开启内测</em></h3>
<p>你可以不查看某人的朋友圈更新,并可以把朋友圈上的私密照片设为公开<p>
<p>清理微信存储空间: 删除不再需要的文件,减少微信占用的存储空间</p>
</body>
</html>

浏览这个网页,我们发现紧接着h3的第一行文字改变了颜色,因为第一个段落是h3的相邻元素。

CSS相邻选择器.png

再看下面的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
p+p {color:red;}
</style>
</head>
<body>
<p>你可以不查看某人的朋友圈更新,并可以把朋友圈上的私密照片设为公开<p>
<p>清理微信存储空间: 删除不再需要的文件,减少微信占用的存储空间</p>
<p>通讯录安全助手,可以将通讯录备份到云端,并可以随时恢复到手机上</p>
</body>
</html>

我们看到三个段落其中后两个段落的文字改变了颜色,在CSS中用一个结合符(+)只能选择两个相邻兄弟中的第二个元素。

CSS相邻选择器2.png

同级元素选择器

有时候可能需要选择的目标元素并不是某指定元素的子元素或兄弟元素,而是互不隶属的同级关系,请看下面的示例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试网页标题</title>
<style type="text/css">
h3~div {color:red;}
</style>
</head>
<body>
<div class="wrap">
<h3><em>2016年9月21日,<span>微信</span>小程序正式开启内测</em></h3>
<div>
<p>你可以不查看某人的朋友圈更新,并可以把朋友圈上的私密照片设为公开<p>
</div>
<p>清理微信存储空间: 删除不再需要的文件,减少微信占用的存储空间</p>
</div>
</body>
</html>

这里我通过h3~div这个选择器设置了h3之后的这个div标签内的文字颜色,此时这个div标签和h3互不构成父子元素,它们属于同级元素,像这样带有~结合符的选择器成为同级元素选择器。

同级元素选择器.png

以上这些选择器的类型可以结合着使用,例如:

#top> table + ul li {margin:10px;}

建议新手朋友在学习的过程中多修改几次代码试试效果,慢慢的就能体会其中的含义了。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/div_css/13.html