> 知识分享

css3层次选择器有什么用

 2024-01-19 03:02:26  阅读 0

用法： 1.后代选择器选择该元素的后代元素，语法为“ {css code}”； 2、子选择器选择该元素的所有子元素，语法为“> {css code}”； 3、相邻兄弟选择器选择该元素同目录下的下一个元素； 4. 通用同级选择器选择元素同一目录中的所有后续标签。

css 层次选择器_css3层次选择器_html5层次选择器

本教程的运行环境：系统，CSS3&&HTML5版本，Dell G3电脑。

css3层次选择器有什么用

层次选择器通过HTML DOM元素之间的层次关系来获取元素。 主要的等级关系有后裔、亲子、相邻兄弟、同兄弟等。 通过一定类型的关系，可以方便快捷地选择所需的元素。 。 层次选择器语法如下：

选择器

类型

功能说明

EF

后代选择器（包含选择器）

选择包含在匹配 E 元素中的匹配 F 元素

E>F

子选择器

选择作为匹配 E 元素的子元素的匹配 F 元素

E+F

邻居选择器

选择紧随匹配 E 元素之后的匹配 F 元素

英~法

通用选择器

选择匹配 F 元素之后且位于匹配 E 元素之后的所有匹配 F 元素

IE7及以上浏览器，包括其他浏览器，都支持分层选择器。 （IE6不支持）

下面用一个HTML文件来说明各种层次选择器的使用：



	
		<meta charset="UTF-8">
		使用CSS3层次选择器
		<style type="text/css">
			* {margin: 0; padding: 0}
			body {width: 300px; margin: 0 auto;}
			p {margin: 5px;padding: 5px;border: 1px solid #ccc;}
		</style>		
	
	<body>
		
1

		
2

		
3

		
4
			
5

			
6

		

		
7
			
8
				
9
					
10

显示效果如下：

其DOM树结构如下：

css3层次选择器_css 层次选择器_html5层次选择器

后代选择器：

后代选择器（EF）也称为包含选择器，其功能是选择一个元素的后代元素。 例如“EF”，E是祖先元素，F是后代元素，表示E元素的所有后代F元素。 这里的F元素，无论是E的子元素、孙元素，还是更深层次的关系，都会被选中。

也就是说，无论F在E中有多少个层级关系，F元素都会被选中。

接下来，使用后代选择器更改其背景颜色，并在上述 HTML 元素的 CSS 代码末尾添加以下样式：

p p {background: orange}

显示效果如下：

子选择器：

子选择器智能地选择一个元素的子元素，其中E是父元素，F是子元素。 E>F表示E元素下的所有子元素F都被选中。 这与后代选择器不同。 在后代选择器中，F是E的后代，但在E>F中，F只是E的子元素。

下面的代码用于改变body下子元素p的背景颜色：

body > p {background:green;}

显示效果如下：

css 层次选择器_css3层次选择器_html5层次选择器

相邻兄弟选择器：

相邻同级选择器选择紧邻另一个元素后面且具有相同父元素的元素。 换句话说，E 和 F 是兄弟元素，F 元素位于 E 元素后面且与其相邻。

以下代码用于更改带有 class 的 p 元素的相邻兄弟元素的背景颜色。 为了方便起见，将 class 属性添加到上述 HTML 元素的第一个 p 元素中，如下所示：

1

然后在 CSS 代码末尾添加以下样式：

.active + p {background:lime}

显示效果如下：

css 层次选择器_html5层次选择器_css3层次选择器

通用兄弟选择器：

用于选择一个元素后面的所有同级元素。 它们与相邻同级元素选择器类似，需要位于同一个父元素中。 也就是说，E元素和F元素是兄弟元素，F元素在E元素之后。

在上述 HTML CSS 代码末尾添加以下样式：

.active ~ p {background:red;}

显示效果如下：

css 层次选择器_css3层次选择器_html5层次选择器

上一篇： 检查Linux中进程的线程
下一篇： MSXML下载软件简介
标签： 元素 后代 匹配

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码