CSS3基础（2）选择器之关系选择器

最新推荐文章于 2022-06-22 20:31:35 发布

ruyulin

最新推荐文章于 2022-06-22 20:31:35 发布

阅读量502

点赞数 1

分类专栏： html5 文章标签：关系选择器

本文链接：https://blog.csdn.net/ruyulin/article/details/80759469

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关系选择器分类

包含选择器
子选择器
相邻选择器
兄弟选择器

包含选择器

包含选择器使用空格隔开，包含选择符将会命中所有符合条件的后代，包括儿子，孙子，孙子的孙子…

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS3</title>
<style>
.test p{ color: #f00; }
</style>
</head>
<body>
<div class="test">
    <h3>这是一个标题</h3>
    <p>这是一个文字段落</p>
    <p>这是一个文字段落</p>
</div>
</body>
</html>

子选择器

与包含选择器不同，子选择符只能命中子元素

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS3</title>
<style>
.demo > div { border:1px solid #f00; }
</style>
</head>
<body>
<div class="demo">
    <div>0
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</div>
</body>
</html>

相邻选择器

选择同级元素相邻的第一个元素

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS3</title>
<style>
/* 相邻选择符(E+F) */
h3 + p { color: #f00; }
</style>
</head>
<body>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>

兄弟选择器

选择同级元素之后符合条件的所有同级元素

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>CSS3</title>
<style>

/* 兄弟选择符(E~F) */
h3 ~ p { color: #f00; }
</style>
</head>
<body>
<h3>这是一个标题</h3>
<p>p1</p>
<p>p2</p>
<p>p3</p>
</body>
</html>