CSS关系选择器
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS关系选择器相关的知识，希望对你有一定的参考价值。
CSS关系选择器
元素选择器，上一节已经学过，包括标签选择器，类选择器，ID选择器，通配选择器四种。
下面开始学习关系选择器，当把两个简单的选择器组合在一起就形成一个复杂的关系选择器，通过关系选择器就可以精确匹配html结构中特定范围的元素。
关系选择器分为:包含选择器，子选择器。
包含选择器可以通过空格连接两个简单的选择器，前面选择器表示包含的对象，后面选择器表示被被包含的对象。可以缩小匹配范围。
包含选择器案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<style type="text/css">
#header p {font-size: 14px}
#main p {font-size: 12px}
</style>
<body>
<div id = "wrap">
<div id = "header">
<p>头部区域段落部分</p>
</div>
<div id = "main">
<p>主体区域段落文本</p>
</div>
</div>
</body>
</html>
子选择器：
子选择器使用尖括号>连接两个简单的选择器，前面选择器表示包含的父对象，后面选择器表示被包含的子对象。
相对于包含选择器，匹配范围更小，从层级结构来看，目标匹配更明确。不过相对于包含选择器，匹配范围有限，需要熟悉文档结构。
子选择案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>以梦为马的少年，终将拥有抵达宇宙星辰的答案！！！</title>
<style type="text/css">
span {font-size: 18px}
h2>span{font-size: 28px}
</style>
<body>
<h2><span>春花秋月何时了</span></h2>
<div><span>春花秋月何时了，往事知多少，小楼昨夜又东风，故国不堪回首月明中。</span></div>
</body>
</html>
以上是关于CSS关系选择器的主要内容，如果未能解决你的问题，请参考以下文章
使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单