CSS导读 (复合选择器 上)

(大家好,今天我们将继续来学习CSS的相关知识,大家可以在评论区进行互动答疑哦~加油!💕)

目录

二、CSS的复合选择器

2.1  什么是复合选择器

2.2  后代选择器(重要) 

2.3 子选择器(重要) 

Questions 小提问

2.4  并集选择器(重要) 


二、CSS的复合选择器

2.1  什么是复合选择器

   在CSS中可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

  •  复合选择器可以更准确、更高效的选择目标元素(标签)。
  • 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。
  • 常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等。

2.2  后代选择器(重要

   后代选择器又称为包含选择器,可以选择父元素里的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代。

语法:

元素1  元素2 {  样式声明  } 

 上述语法表示选择元素1里面的所有元素2(后代元素) 。

ul li {  样式声明  }  /*选择ul里面所有的li标签元素*/

  •  元素1和元素2之间用空格隔开。
  • 元素1是父级,元素2是子级,最终选择的是元素2 。
  • 只要包含于元素1中的都问以选择。
  • 元素1和元素2可以是任意基础选择器.。

代码: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之后代选择器</title>
    <style>
        /* 把ol里的li选出来改为pink色 */
        ol li {
            color: pink;
        }
        ol li a {
            color: greenyellow
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是空链接</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
</body>
</html>

2.3 子选择器(重要

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素,简单解释就是选亲儿子元素。 

语法:

元素1 >  元素2 {  样式声明  }

 上述语法表示选择元素1里面的所有直接后代(子元素)元素2。

div > p  {  样式声明  }   /*选择div里面所有最近一-级p标签元素*/ 

  •  元素1和元素2中间用大于号隔开。
  • 元素1是父级,元素2是子级,最终选择的是元素2。
  • 元素2必须是亲儿子,其孙子,重孙之类的都下不归他管,你也可以叫他亲儿子选择器。

代码: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之子选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>
</html>

Questions 小提问

1.请将下面的链接文字修改为红色。

<div class="nav">

         <ul>

                  <li><a href="#">百度</a></li>

                  <li><a href="#">谷歌</a></li>

         </ul>

</div>

.nav ul li a {

          color: red;

 2.请将下面的中国文字改为红色。

<div class="hot">

        <a href="#">中国</a>

        <ul>

              <li><a href="#">北京</a></li>

              <li><a href="#">上海</a></li>   

        </ul>

</div>

.hot>a {

     color:  red;

2.4  并集选择器(重要

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。 

并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以做为并集选择器的一部分。 

语法:

元素1,元素2 {  样式声明  }

 上述语法表示选择元素1和元素2 。

ul,div { 样式声明 }  /*选择ul和div标签元素*/

  •  元素1和元素2中间用逗号隔开。
  • 逗号可以理解为和的意思。
  • 并集选择器通常用于集体声明。

代码: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS之并集选择器</title>
    <style>
        /* 要求一:把熊大熊二改为红色 */
        /* div,
        p{
            color: red;
        } */
        /* 要求二:把熊大熊二和小猪一家改为粉色 */
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>小猪乔治</li>
    </ul>
</body>
</html>
  1. 约定的语法规范,我们并集选择器喜欢竖着写。
  2. 一定要注意,最后一个选择器,不需要加逗号。

(今日分享暂时到此为止啦!为不断努力的自己鼓鼓掌吧。今日文案分享:须知少时凌云志,曾许人间第一流。) 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/540764.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【CSS基础】9.形变transform

1. transform介绍 CSS transform属性允许对某个一个元素进行形变&#xff0c;包括旋转、位移、缩放、倾斜等并非所有的盒子都可以形变&#xff08;通常来说行内级盒子不能进行形变&#xff09; 2. transform的用法 transform可以增加多个transform function&#xff0c;通过空…

短视频转gif怎么做?三十秒在线转换gif

在现在这个快节奏的时代&#xff0c;gif动画相较于长时间的视频更受大众的欢迎。当我们需要将短视频、电影等视频制作成gif动画图片的时候就可以使用gif动画图片&#xff08;https://www.gif.cn/&#xff09;制作网站-GIF中文网&#xff0c;无需下载软件&#xff0c;手机、pc均…

K8s 命令行工具

文章目录 K8s 命令行工具kubectl 工具在任意节点使用kubectl方式创建对象命令显示和查找资源更新资源修补资源编辑资源Scale 资源删除资源查看pod信息节点相关操作 K8s 命令行工具 在搭建集群的时候&#xff0c;我们通过yum 下载了kubeadm kubelet kubectl 三个命令行工具&…

C 语言贪吃蛇源码解析

贪吃蛇是一款经典的电子游戏&#xff0c;玩家控制一条不断成长的蛇&#xff0c;需要避免撞到自己的身体或者游戏边界&#xff0c;同时吃掉出现在屏幕上的食物以增长身体长度。 下面是一个简单的贪吃蛇游戏的C语言实现&#xff0c;使用了标准输入输出库conio.h和时间库windows.h…

(弟)递归•斐波那契数、n的k次方

这里是目录哦 题目一&#xff1a;递归计算斐波那契数斐波那契数的定义代码运行截图递归过程递归停止条件&#xff08;1个参数&#xff09;✨非递归实现方法 题目二&#xff1a;递归实现n的k次方代码运行截图递归过程递归停止条件&#xff08;不止1个参数&#xff09;✨ 加油&am…

DETR论文粗读

一.前情提要 1.本文理论为主&#xff0c;并且仅为个人理解&#xff0c;能力一般&#xff0c;不喜勿喷 2.本文理论知识较为散碎 3.如有需要&#xff0c;以下是原文&#xff0c;更为完备 DETR 论文精读【论文精读】_哔哩哔哩_bilibili 二.正文 示意图&#xff1a; 1.不同与…

限制立方样条(RCS)做生存分析

一、引言 在医学和统计学领域&#xff0c;生存分析是一种分析个体生命长度和生存时间的重要方法。了解人们生存的期限和影响因素&#xff0c;对于制定健康政策、优化医疗资源的分配以及个体护理方案的制定都至关重要。传统的生存分析方法如Kaplan-Meier曲线和Cox比例风险模型已…

minikube环境搭建

&#x1f4d5;作者简介&#xff1a; 过去日记&#xff0c;致力于Java、GoLang,Rust等多种编程语言&#xff0c;热爱技术&#xff0c;喜欢游戏的博主。 &#x1f4d8;相关专栏Rust初阶教程、go语言基础系列、spring教程等&#xff0c;大家有兴趣的可以看一看 &#x1f4d9;Jav…

B004-表达式 类型转换 运算符

目录 表达式数据类型转换自动转换强制转换 运算符数学运算符自增自减运算符i与 i的区别 赋值运算符比较运算符位运算符(了解)逻辑运算符三目运算符 表达式 /*** 表达式定义&#xff1a;由常量 变量 运算符 括号组成的算式&#xff0c;为了按照一定的运算规则计算出结果值* 括…

HTML 入门 ( 一 )

HTML文档创建 首先创建一个txt文本文档 修改文件后缀 HTML标签 标签结构 标签又称为元素,是HTML的基本组成单位分为: 双标签与单标签推荐小写标签名 结构: 双标签示例代码: <marquee> My name is Kvein. </marquee>单标签示例代码: <input>标签的并列与嵌…

Autosar Dcm配置-手动配置RID及Routine功能实现-基于ETAS软件

文章目录 前言Routine介绍Routine配置DcmDsdDcmDspDcmDspRoutinesSWC配置总结前言 之前介绍了DID的配置,本文介绍UDS诊断中,另外一种常用的功能Routine的配置,及生成代码的使用。 Routine介绍 Routine一般用于ECU较复杂的控制功能。使用UDS服务ID为0x31 31后面跟的是子服…

【智能算法】智能算法空间搜索图GIF,探索开发对比图,动态展示理解更清晰~

目录 1.前文回顾2.空间搜索图3.探索开发对比图4.参考文献 1.前文回顾 前文已经提到智能算法统计指标&#xff0c;本文将进一步扩展算法空间搜索图GIF&#xff0c;探索开发对比图&#xff0c;动态展示理解更清晰&#xff1a; 【智能算法】省时方便&#xff0c;智能算法统计指标…

Python基于大数据的微博的舆论情感分析,微博评论情感分析可视化系统,附源码

博主介绍&#xff1a;✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不…

ExpressLRS硬件实测性能分析

ExpressLRS硬件实测性能分析 1. 源由2. 远航测试3. 实验室测试3.1 芯片RSSI与实测功率差异3.2 SNR信噪比稳定3.3 140db衰减器衰减&#xff0c;40个频点信号稳定 4. 外场测试4.1 无屏蔽样品4.2 有屏蔽样品4.3 有屏蔽vs无屏蔽样品 5. 估算6. 总结7. 补充说明 -- 50mW视频 1. 源由…

从0到1落地接口自动化测试(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前段时间写了一系列自动化测试相关的文章&#xff0c;当然更多的是方法和解决问题的思路角度去阐…

【AHK】显示画布\贴图周数\设置一个时钟显示周数

AHK没有直接显示画布的工具&#xff0c;但可以通过自定义GUI删去菜单栏显示。 具体逻辑&#xff0c;通过时间戳获取天数&#xff0c;然后再拿当前日期和开学日期作差&#xff0c;获取天数之后和数字7相除&#xff0c;再向下取整。 显示下过如图 ;先控制属性&#xff0c;下面依…

php:实现压缩文件上传、解压、文件更名、压缩包删除功能

效果图 1.上传文件 2.压缩包文件 3.itemno1文件 4.上传到系统路径\ItemNo 5.更名后的itemno1文件(命名&#xff1a;当天日期六位随机数) 代码 <form action"<?php echo htmlspecialchars($_SERVER[PHP_SELF], ENT_QUOTES, UTF-8); ?>" method"post…

机器人瓶胚检测工作站(H3U脉冲轴控制)

1、变量定义 2、程序监控1 2、 程序监控2 3、程序监控3 机器人输送料和机构的动作安全尤为重要&#xff0c;下面我们讨论下安全联锁控制逻辑 4、相机拍照触发信号 5、相机拍照触发时序

Harmony鸿蒙南向外设驱动开发-LCD

功能简介 LCD&#xff08;Liquid Crystal Display&#xff09;驱动编程&#xff0c;通过对显示器上电、初始化显示器驱动IC&#xff08;Integrated Circuit&#xff09;内部寄存器等操作&#xff0c;使其可以正常工作。 基于HDF&#xff08;Hardware Driver Foundation&#…

Axure学习:网站后台导航菜单的制作及对应内容的显示

​不少产品经理主要做的产品是后台系统&#xff0c;在做后台原型的时候对于有些部分的内容存在一些疑惑。 我们的学员也是一样&#xff0c;在做后台的时候遇到了一些问题&#xff0c;请教了老师&#xff0c;得到了解答。这里和大家分享一下&#xff0c;同学们的问题以及解决方…