零基础学习CSS(3)——交集选择器、并集选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器

最新推荐文章于 2024-03-29 03:45:44 发布
最新推荐文章于 2024-03-29 03:45:44 发布
阅读量668 收藏 2
点赞数
分类专栏： 零基础学习Web开发 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43650934/article/details/108984991
版权

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/
html5速查手册：https://man.ilovefishc.com/html5/
css速查手册：https://man.ilovefishc.com/css3/

学习正文

交集选择器，语法规则：元素选择器

<!DOCTYPE html>
<html>
<head>
    <title>交集选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        span.content {
            border: thin black solid;
        }
    </style>
</head>
<body>
    <h1>交集选择器</h1>
    <p class="slogan">这是交集选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

在这里插入图片描述

并集选择器，同时对多个标签同时进行修改样式：

<!DOCTYPE html>
<html>
<head>
    <title>并集选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        span.content {
            border: thin black solid;
        }

        h2, p, span {
            font-style: italic; /* 斜体 */
        }
    </style>
</head>
<body>
    <h1>并集选择器</h1>
    <p class="slogan">这是并集选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

在这里插入图片描述
后代选择器，可以理解为：在……中找到……，然后执行……

<!DOCTYPE html>
<html>
<head>
    <title>后代选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body .content { /* 用空格进行分割 */
            border: thin black solid;
        }
    </style>
</head>
<body>
    <h1>后代选择器</h1>
    <p class="slogan">这是后代选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

在这里插入图片描述
子元素选择器，只匹配子元素进行格式改变：

<!DOCTYPE html>
<html>
<head>
    <title>子元素选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body > .content { /* span为body元素的孙子元素，不被匹配 */
            border: thin black solid;
        }
    </style>
</head>
<body>
    <h1>子元素选择器</h1>
    <p class="slogan">这是子元素选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

在这里插入图片描述
相邻兄弟选择器，只匹配相邻的、且为同一父元素的元素：

<!DOCTYPE html>
<html>
<head>
    <title>相邻兄弟选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body > .content { /* span为body元素的孙子元素，不被匹配 */
            border: thin black solid;
        }

        h2, p, span {
            font-style: italic; /* 黑边框 */
        }

        .slogan + p { /* slogan紧跟的p元素 */
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <p class="slogan">这是相邻兄弟元素选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

在这里插入图片描述
通用兄弟选择器，匹配位置无须紧邻，只须同层级：

<!DOCTYPE html>
<html>
<head>
    <title>相邻兄弟选择器</title>
    <meta charset="utf-8">
    <style type="text/css">
        * {
            padding: 10px;
            background-color: #d1feef;
        }

        h1 {
            text-align: center;
        }

        span {
            color: grey;
            padding: 0px;
        }

        img {
            width: 212px;
        }

        .slogan {
            text-align: center;
            color:#2eeb96;
        }

        .content {
            text-indent: 2em;
        }

        body > .content { /* span为body元素的孙子元素，不被匹配 */
            border: thin black solid;
        }

        h2, p, span {
            font-style: italic; /* 黑边框 */
        }

        .slogan ~ p { /* slogan紧跟的p元素 */
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>相邻兄弟选择器</h1>
    <p class="slogan">这是相邻兄弟元素选择器的使用</p>
    <p class="content">“妈，<span class="content">三年之期</span>到了，这三年里，我都按照您的遗言去做了，现在整个苏家乃至半个江城，没有谁不知道那从林家入赘过来的弃少就是个废物！”</p>
    <p class="content">“妈，我知道，你之所以要我隐忍三年，是担心我会遭受家族人的迫害，你说过，我天赋异禀，将来必是人中龙凤，但出身不好，无权无势，争不过那些人，一旦展露出一些天赋，必会招来杀身之祸，所以你逼我装成一个废物。” </p>
    <p class="content">“可是…妈，您并不知道，您错了，大错特错，林家在我林阳的眼里，只是一群土鸡瓦狗！我林阳何惧一群土鸡瓦狗？”</p>
    <p class="content">“林家抛弃了我，您也不希望我再回林家，我跟林家已经没有关系。今天来看您，是想告诉您，三年之期结束，我…林阳！不想再当废物了！”</p>
    <img src="Pig.png">
</body>
</html>

在这里插入图片描述

Dragon水魅
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器到底有哪些？CSS笔记（一）
01-20
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器子元素选择器伪类...
【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-05 2689
一、并集选择器 1、语法说明 2、代码示例 二、并集选择器与后代选择器示例 1、添加注释 2、HTML 结构 3、后代选择器 1 4、后代选择器 2 5、并集选择器 6、完整代码示例 7、显示效果
CSS交并集选择器
m0_73559209的博客
08-11 1510
上面的例子中，选择所有标签，并将它们的背景颜色设置为dodgerblue。.two p {在上面的例子中，选择所有在class为two的元素内部的<p>标签并将它们的背景颜色设置为blue。.two > p {
CSS复合选择器
最新发布
2401_83704125的博客
03-29 998
重要关键元素选择器效果交集选择器效果类选择器效果。
web前端css学习笔记(2)——选择器
m0_52353966的博客
03-24 995
本篇学习CSS选择器，内容比较复杂易混。本篇学习CSS选择器：通配选择器，元素原则器，类选择器，ID选择器；通过不同的组合我们得到交集选择器、并集选择器、后代选择器、子代选择器、兄弟选择器和属性选择器。伪类选择器将单独放到下篇笔记中。
CSS第一章：3.交集选择器、并集选择器
热门推荐
要思考，要努力
04-26 1万+
总览1.交集选择器：同时满足多个选择器筛选条件的才能被选中2.并集选择器：只要满足其中一个筛选条件就能够被选中一、交集选择器1.HTML代码：2.CSS代码：（class值不使用任何东西隔开，表示“且”） 筛选 class 值 同时具有 red 和 fontsize50 的标签，将字号设置为50px，文本颜色设置成红色： 筛选 class 值 为 blue 的 p 标签，将颜色调为蓝色： 3.显示效果： 二、并集选择器 1.HTML代码： 2.CSS代码：（class值用“，”隔开，表示“
CSS交集选择器，并集选择器
weixin_72322475的博客
08-07 6023
举例介绍CSS交集选择器，并集选择器
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
（2）子元素选择器（子选择器 重要） 语法 元素1>元素2{样式声明} 元素1和元素2用>隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 （3）...
十三种常见选择器概念介绍
01-31
标签选择器 类选择器 id选择器 通配符选择器 后代选择器 子代选择器 并集选择器 交集选择器 hover伪类选择器 结构为类选择器 链接伪类选择器 焦点伪类选择器 属性选择器
了解JavaScript中的选择器
12-02
.getElementById(“id”)id选择器; .getElementsByName(“name”)name选择器; .getElementsByTagName(“tagname”)tag标签名选择器； .getElementsByClassName(“.classname”).class名选择器 示例代码： <!...
分类解析jQuery选择器
11-26
　selecttor1,selector2　并集，返回两个选择器匹配到的元素 层次选择器： 　ancestor descendant　根据祖先匹配所有的后代元素 　parent>child　根据父元素匹配所有的子元素，直接后代 　prev+next　匹配下一个兄弟...
CSS的选择器(标签、类、id、通配符、后代、子元素、并集、链接伪类、focus伪类)
Bulut0907
01-23 3628
目录1. 标签选择器2. class类选择器3. id选择器4. 通配符选择器 1. 标签选择器 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>test title</title> <style> p { font-family: 宋体, sans-serif,
CSS中常见选择器及其用法
薯条和番茄酱的博客
07-16 559
之前介绍过HTML中常见标签的用法，以下将介绍CSS中不同选择器的使用。CSS是用来实现页面的样式规则，可以起到美化页面的作用。通过标签选择器可以选中对HTML中对应的标签等设置特定的样式，通过类选择器可以设置同一类元素的样式，以下将详细介绍。
HTML &CSS之复合选择器中的交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器、属性选择器
dream_follower的博客
06-19 4314
复合选择器是通过基本选择器进行组合后构成的，常用的复合选择器有：交集选择器、并集选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器等。 1. 交集选择器 交集选择器由两个选择器直接构成，其中第一个必须是元素选择器，第二个必须是类选择器或者ID选择器。两个选择器之间必须连续写，不能有空格。交集选择器选择的元素必须是有第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的ID或...
CSS——CSS复合选择器（重中之重 ☆）
流楚丶格念的博客
06-27 4900
文章目录CSS复合选择器交集选择器并集选择器后代选择器子元素选择器伪类选择器链接伪类选择器 CSS复合选择器 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。 记忆技巧： 交集选择器 是 并且的意思。 即…又…的意思 比如： p.one 选择的是： 类名为 .one 的 段落标签。 用的相
CSS并集选择器的介绍
apple_64036401的博客
03-14 545
并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。iv标签和p标签中的内容颜色为红色，可以使用并集选择器把它们并起来。例子：如果我们想让d。
【CSS】CSS 复合选择器 ② ( 子元素选择器 | 交集选择器 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-05 1776
一、子元素选择器 1、语法说明 2、代码分析 3、代码示例 二、交集选择器 1、语法说明 2、代码示例
学习记录 --【零基础CSS学习】05.并集选择器和交集选择器
m0_37612107的博客
05-10 1763
目录 前言 一、并集选择器 二、交集选择器 前言 写这个初衷是为了记录自己学习的过程，强制打卡，希望自己不要半途而废，也希望可以给和我一样的入门小白提供一些参考。 我的学习就是跟着视频学习，浏览一些教学网站，边看边学边练，希望大家一起进步。 一、并集选择器 并集选择器 1.同时选中多个元素 2.选择时要用","连接 3.标签选择器，id选择器，class选择器都可以混合使用 示例1： 利用并集选择器，同时选择div和第一个p元素，对里面的内容进行相同的样式设置 <!DOCT
css选择器并集交集
09-22
并集选择器是通过逗号将多个选择器连接在一起的，可以同时选择多个元素，并为它们定义相同的CSS样式。例如，使用并集选择器可以选择多个标签，并将它们的背景颜色设置为相同的值。 交集选择器由两个选择器构成，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值