CSS的基本选择器及高级选择器(附详细示例以及效果图)

Hi i,m JinXiang


⭐ 前言 ⭐

本篇文章主要介绍HTML中CSS的基础选择及高级选择器(详解)以及部分理论知识


🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言


目录

⭐ CSS基本选择器:

⭐ CSS高级选择器

🍧一、层次选择器(重点)

1、概念

2、使用(附示例以及效果图)

3、总结

🍧二、结构伪类选择器(不常用)

1、概念

🍧三、属性选择器(重点)

1、概念

2、使用(附示例以及效果图)

3、总结


 CSS基本选择器:

CSS基本选择器是使用最广泛和最常见的选择器类型,用于选择HTML文档中的元素。基本选择器包括以下几种:

  • ①标签选择器:标签(HTML标签作为标签选择器的名称){声明}
    • 标签选择器总结:标签选择器直接应用于HTML标签
    • 示例:<p>测试标签选择器</p>
      CSS: p { color: pink; }
    • 效果图:
  • ②类选择器:
    • 创建:.class(类选择器也是类名称){声明}
    • 使用:<标签名 class="类名称">标签内容</标签名>
    • 类选择器总结:类选择器可在页面中多次使用
    • 示例:<label class="label_test">测试类选择器</label>
      CSS:.label_test {width: 200px;height: 200px;border: 4px solid black;background-color: pink;
      }
      
    • 效果图:
  • ③ID选择器:#ID(ID选择器也是ID名称){声明}
    •  ID选择器总结:ID选择器在同一个页面中只能使用一次
    • 示例:<a id="a_test">测试id选择器</a>
      CSS: #a_test{width: 300px;height: 301px;border: 1px solid black;
      }
    • 效果图:

基本选择器的优先级:ID选择器>类选择器>标签选择器

CSS高级选择器

一、层次选择器(重点)

1、概念

层次选择器是CSS中一种常见的选择器,用于选择具有特定层次关系的元素。通过层次选择器,可以选择父元素、子元素、兄弟元素等。

常见的层次选择器包括:

  • 1、后代选择器用空格表示。它选择某个元素的所有后代元素。例如,选择所有段落元素内部的 strong 元素可以使用 p strong 选择器。
  • 2、子元素选择器用>表示。它选择某个元素的直接子元素。例如,选择 ul 元素下的所有 li 元素可以使用 ul > li 选择器。
  • 3、相邻兄弟选择器用+表示。它选择某个元素的下一个相邻兄弟元素。例如,选择某个元素后面紧邻的 p 元素可以使用 p + p 选择器。
  • 4、通用兄弟选择器用~表示。它选择某个元素后面的所有兄弟元素。例如,选择某个元素后面的所有 p 元素可以使用 p ~ p 选择器。

层次选择器可以根据层次关系选择特定的元素,使得选择更加灵活和具体。

2、使用(附示例以及效果图)

①、后代选择器:p strong
  • 示例:<p><strong>后代选择器示例</strong></p>
  • CSS:p strong{ color: pink; }
  • 效果图:
②、子元素选择器: ul > li
  • 示例:<ul> <li>子选择器1</li><li>子选择器2</li> </ul>
  • CSS:ul>li{ background-color: #acacac; }
  • 效果图:
③、相邻兄弟选择器:p + p
  • 示例:<p>第一位同志</p> <p>第二位同志</p> <p>第三位同志</p>
  • CSS: p + p {color: pink;background-color: #acacac;
    }
  • 效果图:
④、通用兄弟选择器:p ~ p
  • 示例:<p>第一位同志</p> <p>第二位同志</p> <p>第三位同志</p>
  • p ~ p {color: pink;background-color: #acacac;
    }
  • 效果图:

3、总结

选择器名称选择器表示形式选择器作用
后代选择器p  strong选择某个元素的所有后代元素
子元素选择器ul > li选择某个元素的直接子元素
相邻兄弟选择器p + p选择某个元素的下一个相邻兄弟元素
通用兄弟选择器p ~ p择某个元素后面的所有兄弟元素

 二、结构伪类选择器(不常用)

1、概念

结构伪类选择器是CSS中一种常见的选择器,用于选择页面中满足特定结构的元素。它们根据元素在文档树中的位置和关系来进行选择。

常见的结构伪类选择器包括:

  • 1、first-child 选择器:选择某个元素作为其父元素的第一个子元素。
  • 2、last-child 选择器:选择某个元素作为其父元素的最后一个子元素。
  • 3、nth-child(n) 选择器:选择某个元素作为其父元素的第n个子元素。
  • 4、nth-last-child(n) 选择器:选择某个元素作为其父元素的倒数第n个子元素。
  • 5、only-child 选择器:选择某个元素作为其父元素的唯一一个子元素。
  • 6、nth-of-type(n) 选择器:选择某个元素作为其父元素中特定类型的第n个元素。
  • 7、nth-last-of-type(n) 选择器:选择某个元素作为其父元素中特定类型的倒数第n个元素。

结构伪类选择器可以根据元素在文档树中的位置和关系,灵活地选择特定的元素,从而实现页面样式的控制和布局。

三、属性选择器(重点)

1、概念

属性选择器是CSS中一种常见的选择器,用于根据元素的属性值来选择元素。属性选择器可以根据元素的属性值、属性存在与否,或属性值的特定关系来选择元素。

  • 1、A[attr]选择具有指定属性的元素
  • 2、A[attr=val]选择匹配具有属性attr的A元素,并且属性值为val(其中val区分大小写)
  • 3、A[attr^="val"]:选择匹配元素A,且A元素定义了属性attr,其属性值是以val开头的任意字符串
  • 4、A[attr$="val"]:选择匹配元素A,且A元素定义了属性attr,其属性值是以val结尾的任意字符串
  • 5、A[attr*="val"]:选择匹配元素A,且A元素定义了属性attr,其属性值包含了“val”

属性选择器提供了一种根据元素属性值来选择元素的灵活方式,可以根据实际需要进行选择和样式设置。

2、使用(附示例以及效果图)

 ①、选择指定属性元素:div[ class ]
  • 示例:<div class="div_test">属性选择器使用测试</div>
  • CSS:div[class] {color: aqua;width: 100px;height: 100px;background-color: #acacac;
    }
  • 效果图:
  ②、选择匹配指定属性的元素(区分大小写):div[ class ="div_test" ]
  • 示例:<div class="div_test">属性选择器使用测试</div>
  • CSS:div[class="div_test"] {color: red;width: 100px;height: 100px;background-color: aqua;
    }
  • 效果图:
  ③、选择匹配元素,其属性以指定值开头:div[ class  ^= "div"]
  • 示例:<div class="div_test">属性选择器使用测试</div>
  • CSS:div[class^= "div"] {color: black;width: 100px;height: 100px;background-color: aliceblue;
    }
  • 效果图:
   ④、选择匹配元素,其属性以指定值结尾:div[ class $= "test"]
  • 示例:<div class="div_test">属性选择器使用测试</div>
  • CSS:div[class$= "test"] {color: antiquewhite;width: 100px;height: 100px;background-color: beige;
    }
  • 效果图:
  ⑤、选择匹配元素,其属性中包含了指定值:div[ class *= "v" ]
  • 示例:<div class="div_test">属性选择器使用测试</div>
  • CSS:div[class*= "_"] {color: crimson;width: 100px;height: 100px;background-color: darkcyan;
    }
  • 效果图:

3、总结

选择器表示形式选择器作用
div[ class ]标签包含的属性
div[ class ="div_test" ]选择指定值
div[ class  ^= "div"]开头指定值
div[ class $= "test"]结尾指定值
div[ class *= "v" ]包含指定值

高级选择器可以让我们更加精确地选择目标元素,实现更复杂和细致的样式效果。但需要注意的是,过多的选择器和复杂的选择规则可能会影响页面性能和维护性,因此在使用高级选择器时应保持简洁和合理。

总结不易,希望uu们不要吝啬亲爱的👍哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正😁

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JVM学习之运行时数据区

运行时数据区 概述 内存 内存是非常重要的系统资源&#xff0c;是硬盘和CPU的中间桥梁&#xff0c;承载着操作系统和应用程序的实时运行。JVM内存布局规定了Java在运行过程中内存申请&#xff0c;分配&#xff0c;管理的策略&#xff0c;保证了JVM高效稳定运行。不同的JVM对于…

STL容器之string(上)

目录 什么是STL string类 string类常见接口 string类的常见构造函数 string类对象的容器操作 string类对象的访问及遍历操作 string类对象的修改操作 拓展 从本期开始&#xff0c;我们将正式学习C中的STL&#xff0c;美国的麦克阿瑟将军说过&#xff1a;“C不能没有STL就…

mipi dsi协议DBI/DPI接口

MIPI dsi协议中的DBI/DPI接口主要用于主机和display设备之间的数据传输&#xff0c;说的更通俗一点就是DSI RX控制器和实际的显示面板之间的接口&#xff1b;dsi 协议spec中对DBI/DPI有描述&#xff1a; DSI协议中对DBI 接口模式命名为command mode operation&#xff0c;对DP…

【物联网】EMQX(二)——docker快速搭建EMQX 和 MQTTX客户端使用

一、前言 在上一篇文章中&#xff0c;小编向大家介绍了物联网必然会用到的消息服务器EMQ&#xff0c;相信大家也对EMQ有了一定的了解&#xff0c;那么接下来&#xff0c;小编从这篇文章正式开始展开对EMQ的学习教程&#xff0c;本章节来记录一下如何对EMQ进行安装。 二、使用…

QT第一步

文章目录 软件下载软件安装QT的程序组新建项目 软件下载 qt下载网址&#xff1a;https://download.qt.io/archive/qt/   关于版本&#xff1a;     我选择的版本是5.14.2&#xff0c;这个版本是最后的二进制安装包的版本&#xff0c;在往后的版本就需要在线安装了。并且5…

994. 腐烂的橘子 --力扣 --JAVA

题目 在给定的 m x n 网格 grid 中&#xff0c;每个单元格可以有以下三个值之一&#xff1a; 值 0 代表空单元格&#xff1b;值 1 代表新鲜橘子&#xff1b;值 2 代表腐烂的橘子。 每分钟&#xff0c;腐烂的橘子 周围 4 个方向上相邻 的新鲜橘子都会腐烂。 返回 直到单元格中没…

C#基础——构造函数、析构函数

C#基础——构造函数、析构函数 1、构造函数 构造函数是一种特殊的方法&#xff0c;用于在创建类的实例时进行初始化操作。构造函数与类同名&#xff0c;并且没有返回类型。 构造函数在对象创建时自动调用&#xff0c;可以用来设置对象的初始状态、分配内存、初始化字段等操作…

【跨域】同源策略、跨域解决

文章目录 1. 什么是同源策略及其限制内容?2. JSONP的实现流程3. CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。4. Node中间件代理(两次跨域)5. nginx反向代理6. 总结1. 什么是同源策略及其限制内容? 同源策略是一种约定,它是浏览器最核心也最…

【漏洞复现】DophinPHP后台getshell

漏洞描述 DolphinPHP(海豚PHP)是一个基于ThinkPHP5.1.41LTS开发的一套开源PHP快速开发框架,DolphinPHP秉承极简、极速、极致的开发理念,为开发集成了基于数据-角色的权限管理机制,集成多种灵活快速构建工具,可方便快速扩展的模块、插件、钩子、数据包。统一了模块、插件…

单机架构到分布式架构的演变

目录 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 总结 1.单机架构 初期&#xff0c;我们需要利用我们精干的技术团队&#xff0c;快…

RocketMQ系统性学习-SpringCloud Alibaba集成RocketMQ以及批量发送消息、消息过滤实战

文章目录 批量发送消息消息过滤 批量发送消息 批量发送消息可以减少网络的 IO 开销&#xff0c;让多个消息通过 1 次网络开销就可以发送&#xff0c;提升数据发送的吞吐量 虽然批量发送消息可以减少网络 IO 开销&#xff0c;但是一次也不能发送太多消息 批量消息直接将多个消…

C#基础——类、对象和属性

类&#xff1a;是具有相同属性和行为特征的集合 对象&#xff1a;对象是类的实例化&#xff0c;它具有类定义的所有特征和行为。 类的语法格式&#xff1a; 访问修饰符 class关键字 类名 两种创建类的方式 第一种方式就是在类的下面再创建一个类 第二种方式是在文件中添加一个…

【员工工资册】————大一期末答辩近满分作业分享

前言 大家好吖&#xff0c;欢迎来到 YY 滴项目系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C语言的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; PS&#xff1a;以下内容是部分展示&am…

springboot升级到3.2导致mybatis-plus启动报错

在springboot升级到3.2时&#xff0c;服务启动报错 java.lang.IllegalArgumentException: Invalid value type for attribute ‘factoryBeanObjectType’: java.lang.String&#xff1a; java.lang.IllegalArgumentException: Invalid value type for attribute factoryBeanOb…

Raspberry PI + Codesys + EtherCAT步进驱动ECR60 Motion功能测试

原文连接&#xff1a;Raspberry PI Codesys EtherCAT步进驱动ECR60 Motion功能测试 – 个人资料收集 (rtplc.com) <div class"post_info_wrapper "> <p class"has-drop-cap">运动控制功能是codesys及EtherCAT通讯的重要功能&am…

55 代码审计-JAVA项目注入上传搜索或插件挖掘

目录 必备知识点演示案例:简易Demo段SQL注入及预编译IDEA审计插件FindBugs安装使用Fortify_SCA代码自动审计神器使用Ofcms后台SQL注入-全局搜索关键字Ofcms后台任意文件上传-功能点测试 涉及资源&#xff1a; 我们一般针对java项目&#xff0c;进行漏洞分析的话&#xff0c;主要…

4-Docker命令之docker build

1.docker build介绍 docker build命令是用来使用Dockerfile文件创建镜像 2.docker build用法 docker build [参数] PATH | URL | - [root@centos79 ~]# docker build --helpUsage: docker buildx build [OPTIONS] PATH | URL | -Start a buildAliases:docker buildx build…

【计算机视觉--解耦视频分割跟踪任何物体】

UIUC&Adobe开源|无需监督&#xff0c;使用解耦视频分割跟踪任何物体&#xff01;视频分割的训练数据往往昂贵且需要大量的标注工作。这限制了将端到端算法扩展到新的视频分割任务&#xff0c;特别是在大词汇量的情况下。为了在不为每个个别任务训练视频数据的情况下实现“跟…

HPM6750系列--第九篇 GPIO详解(中断操作)

一、目的 在上篇中《HPM6750系列--第九篇 GPIO详解&#xff08;基本操作&#xff09;》我们讲解了GPIO的基本操作&#xff0c;本篇继续讲解GPIO的中断处理。 二、介绍 将一个引脚设置为中断涉及到以下几个步骤&#xff08;此处我们以PZ02举例&#xff09;&#xff1a; 1.设置IO…

全球汽车行业的数字化转型:产品和后端的渐进之旅

如何管理汽车行业的数字化转型?在我们本篇文章中了解更多有关如何设定长期目标的信息。 正在改变汽车行业的26个数字化主题 最近一篇关于汽车行业数字化转型的论文确定了26个数字技术主题&#xff08;论文详情请点击阅读原文&#xff09;&#xff0c;分为三个主要集群: 1)驾驶…