CSS关系选择器

最新推荐文章于 2024-09-20 17:02:58 发布

nuist__NJUPT

最新推荐文章于 2024-09-20 17:02:58 发布

阅读量684

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： css html5 html

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/120683492

版权

HTML+CSS+JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的关系选择器，包括包含选择器和子选择器。通过组合简单选择器，关系选择器能更精确地匹配HTML结构中的特定元素。包含选择器用空格连接选择器，匹配包含关系的元素；子选择器使用尖括号，只匹配直接子元素。示例代码展示了如何使用这两种选择器来调整不同层级段落的字体大小。

摘要由CSDN通过智能技术生成

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>