【前段基础入门之】=＞你不知道的 CSS 选择器的进阶使用！

在这里插入图片描述
导语：

在上一章节中，我们了解了 CSS 的一些基本语法概念，那么在这一章节中我们就带来 CSS 选择器知识的分享，选择器这一章的知识点有一点多，不过我们只要认真去理解，学习它也是没什么问题的，还有，当我们掌握好CSS选择器的使用后，并能熟练的去运用它，这对于我们之后的正式开发是有很多帮助的。

在这里插入图片描述

文章目录

  • 基本选择器
    • 通配符选择器
    • 元素选择器
    • 类选择器
    • ID选择器
    • 基本选择器总结：
  • 复合选择器
    • 基础复合选择器
      • 交集选择器
      • 并集选择器
      • 补充：HTML元素间的结构关系
      • 后代选择器
      • 子级选择器
      • 兄弟选择器
    • 高级复合选择器
      • 属性选择器
      • 伪类选择器
        • 动态伪类
        • 结构伪类
        • 否定伪类
        • UI 伪类：
        • 目标伪类
        • 语言伪类
      • 伪元素选择器
  • CSS 选择器优先级（权重）
  • CSS 的三大特性
    • 层叠性
    • 继承性
    • 优先级
  • 总结

基本选择器

概念:

本章节分析讲解的顺序是按照，简单到进阶的过程讲解，首先 基本选择器，作为 CSS 中的基础项，可以更加简单直接的选定元素。缺点是，处理复杂场景下的选项时，效率一般。

通配符选择器

  • 作用：可以选中所有的 HTML 元素。
  • 语法：
* {属性名: 属性值;
}
  • 示例：
/* 选中 HTML中的 所有元素 ，为其设定样式*/
* {color: red;font-size: 25px;
}

使用场景：

常用于为其全局 HTML，清楚默认样式。

元素选择器

  • 作用：为页面中 某种元素 统一设置样式。
  • 语法：
（直接写）元素标签名 {属性名: 属性值;
}
  • 示例：
/* 选中页面中，所有的  h1 元素 */
h1 {color: rgb(0, 255, 60);font-size: 25px;
}/* 选中页面中，所有的  p 元素 */
p {color: aquamarine;font-weight: bold;
}

注意：

元素选择器 无法实现差异化设置，例如上面的代码中，全局所有的 p 元素效果都一样。

类选择器

  • 作用：根据元素的 class 值，来将某些元素进行归类，并选中这些元素。
  • 语法：
.类名 {属性名: 属性值;
}
  • 示例：
/* 选中所有class值为speak的元素 */
.speak {background-color: blueviolet;font-size: 25px;
}/* 选中所有class值为answer的元素 */
.answer {color: aquamarine;font-weight: 600;
}

值得注意：

在这里插入图片描述
在这里插入图片描述

ID选择器

  • 作用：根据元素的 ID 属性值，来精准的选中某个元素。
  • 语法：
#id值 {属性名: 属性值;
}
  • 示例：
/* 选中id值为earthy的那个元素 */
#earthy {color: red;font-size: 60px;
}
  • 【值得注意】：
    • id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空格、区分大小写。
    • 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同,具有 唯一性。
    • 一个元素可以同时拥有 id 和 class 属性。

基本选择器总结：

基本选择器特性用法
通配选择器选中所有标签，一般用于清除全局默认样式。* {color:red}
元素选择器选中所有同种标签，但是不能差异化选择。h1 {color:red}
类选择器选中所有特定类名（ class 值）的元素 —— 使用频率很高。.say {color:red}
ID选择器选中特定 id 值的那个元素（具有唯一性）。#earthy {color:red}

复合选择器

  • 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
  • 复合选择器可以在复杂结构中，快速而准确的选中元素。

基础复合选择器

交集选择器

在这里插入图片描述

  • 作用：选中 同时符合 多个条件的元素。
  • 语法：
    在这里插入图片描述
  • 示例：
/* 选中类名为  speak 的 h1 元素*/
h1.speak {color: aqua;
}/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {color: blue;
}/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {color: green;
}

值得注意：

  1. 有标签名，标签名必须写在前面。
  2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
  3. 交集选择器中 不可能 出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。
  4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如：p.beauty

并集选择器

概念：所谓并集就是 或者 的含义（通俗理解：要么......要么...... 的意思）。

  • 作用：选中多个选择器对应的元素，又称：【分组选择器】。

  • 语法：在这里插入图片描述

    • 多个选择器通过 ,连接，此处 , 的含义就是：或。

  • 示例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {font-size: 40px;background-color: skyblue;width: 200px;
}

值得注意:

  1. 并集选择器，我们一般竖着写，结构更清晰点。
  2. 任何形式的选择器，都可以作为并集选择器的一部分 。
  3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

补充：HTML元素间的结构关系

结构关系可分为

  1. 父元素
  2. 子元素
  3. 祖先元素
  4. 后代元素
  5. 兄弟元素

【父元素】：直接包裹某个元素的元素，就是该元素的父元素。

引用尚硅谷图片

【子元素】：被父元素直接包含的元素（简记：儿子元素）。

引用尚硅谷图片
【祖先元素】：父亲的父亲…，一直往外找，都是祖先元素
注明：备注：父元素，也算是祖先元素的一种。

引用尚硅谷图片
【后代元素】：儿子的儿子…，一直往里找，都是后代元素
注明：备注：子元素，也算是后代元素的一种。
引用尚硅谷图片
【兄弟元素】：具有相同父元素的元素，互为兄弟元素。

引用尚硅谷图片

后代选择器

  • 作用：选中指定元素中，符合要求的后代元素

  • 语法：在这里插入图片描述

    • 选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。

  • 示例：

/* 选中ul中的所有li */
ul li {color: red;
}/* 选中ul中所有li中的a */
ul li a {color: orange;
}/* 选中类名为subject元素中的所有li */
.subject li {color: blue;
}/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {color: blue;
}

值得注意：

  1. 后代选择器，最终选择的是后代，不选中祖先元素。
  2. 儿子、孙子、重孙子，都算是后代。
  3. 结构一定要符合 HTML 嵌套规则要求，例如：不能 p 中写 h1 ~ h6 。

子级选择器

  • 作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

  • 别名：子元素选择器、子选择器、子代选择器。

  • 语法：在这里插入图片描述

    • 选择器之间，用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。

  • 示例：

/* div中的子级a元素 */
div>a {color: red;
}/* 类名为persons的元素中的子级a元素 */
.persons>a {color: red;
}

值得注意：

  1. 子代选择器，最终选择的是子代，不是父级
  2. 子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子。

在这里插入图片描述

兄弟选择器

  • 相邻兄弟选择器：
    • 作用：选中指定元素后，符合条件并且紧挨着相邻兄弟的元素
    • 语法：选择器1 + 选择器2 {} 。
    • 示例 ：
/* 选中div后相邻的兄弟p元素 */
div+p {color: red;
}

  • 通用兄弟选择器：

    • 作用：选中指定元素后，符合条件的 所有兄弟元素
    • 语法：选择器1 ~ 选择器2 {} 。
    • 示例 ：
/* 选中div后的所有的兄弟p元素 */
div~p {color: red;
}

值得注意：

  • 两种兄弟选择器，查找兄弟的时候，都是顺序，从上向下找去匹对的。

高级复合选择器

属性选择器

  • 作用：：选中属性值符合一定要求的元素。

  • 语法：

    • [ 属性名 ] 选中 具有 某个属性的元素。
    • [ 属性名="值" ] 选中包含某个属性，且属性值 等于 指定值的元素。
    • [ 属性名^="值" ] 选 包含 某个属性，且属性值以指定的值 开头 的元素。
    • [ 属性名$="值" ] 选中 包含 某个属性，且属性值以指定的值 结尾 的元素。
    • [ 属性名*=“值” ] 选择包含某个属性，属性值 包含 指定值的元素。

  • 示例：

/* 选中具有title属性的元素 */
div[title] {color: red;
}/* 选中 title 属性值为cor的元素 */
div[title="cor"] {color: red;
}/* 选中title属性值以c开头的元素 */div[title^="c"] {color: red;
}/* 选中title属性值以r结尾的元素 */
div[title$="r"] {color: red;
}/* 选中title属性值包含o的元素 */
div[title*="o"] {color: red;
}

伪类选择器

  • 作用：选中特殊状态的元素
  • 概念：如何理解 【伪类】 — 像类( class )，但不是类，是元素的一种特殊状态。
动态伪类
  1. :link:超链接 未被访问的状态 【超链接a 标签独享】
  2. :visited:超链接 被访问过的状态 【超链接a 标签独享】
  3. :hover:超链接 鼠标悬停在元素上的状态
  4. :active 元素 激活 的状态。
    在这里插入图片描述
  5. :focus : 元素获取焦点时的状态

注明：只有表单类元素才能使用 :focus 伪类。

结构伪类
  1. :first-child ：所有兄弟元素中的 第一个。
  2. :last-child ：所有兄弟元素中的 最后一个。
  3. :nth-child(n) ：所有兄弟元素中的 第 N 个元素。
  4. :first-of-type：所有 同类型兄弟元素中的 第 一个元素。
  5. :last-of-type：所有 同类型兄弟元素中的 最后一个元素。
  6. :nth-of-type(n) ：所有 同类型兄弟元素中的 第 N 个元素。

注意：关于 n 的 取值范围

在这里插入图片描述
结构伪类扩展补充【了解即可】:

语法描述
:nth-last-child(n)所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n)所有同类型兄弟元素中的 倒数第n个
:only-of-type 选择没有同类型兄弟的元素。
:only-child选择没有兄弟的元素（独生子女）。
:root选中全局 html 根元素。
:empty内容为空元素（空格也算内容）。
否定伪类
  • :not(选择器): 排除 满足括号中条件的元素
UI 伪类：
  1. :checked ：被选中获取焦点的复选框或单选按钮
  2. :enable： 可用的表单元素（没有 disabled 属性）。
  3. :disabled： 不可用的表单元素（有 disabled 属性）。

使用场景：UI 伪类，主要运用在 表单元素。

目标伪类
  • :target ：选中锚点指向的元素
  • 使用场景：常用于锚点跳转时，为其匹配到的锚点元素指定样式
语言伪类
  • :lang() 根据指定的语言类型选择元素（本质是看 lang 属性的值）。

伪元素选择器

作用：选中元素中的一些特殊位置，在某个位置创建一个元素，并为其指定样式填充

语法描述
::first-letter 选中元素中的第一个文字。
::first-line选中元素中的第一行文字。
::selection 选中被鼠标选中的内容
::placeholder 选中输入框的提示文字。
::before在元素最开始的位置，创建一个子元素，并为其指定样式（需配合content指定内容）
::after 在元素最后的位置，创建一个子元素，并为其指定样式（也需配合content指定内容）

CSS 选择器优先级（权重）

概述：

通过不同的选择器，选中相同的元素时,并且为相同的样式名设置了不同的属性值时，就触发了样式的冲突! 这时候就需要通过计算选择器的权重优先级来适配样式了

  • 基础选择器权重：
    在这里插入图片描述

  • 复合选择器需通过计算规则决定优先级：

    • 计算方式 ：每个选择器，都可计算出一组权重，格式为： (a,b,c)
      在这里插入图片描述
    • 比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比,胜出者为最终展示的样式。 如：
      在这里插入图片描述

  • 特殊规则：

    • 行内样式权重大于所有选择器。
    • !important 的权重，大于行内样式，大于所有选择器，权重最高！

CSS 的三大特性

层叠性

  • 概念：如果发生了样式冲突，会触发一定的规则（先匹配选择器的优先级，优先级如果相同，则后声明样式覆盖掉前面样式。）

继承性

  • 概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式
  • 继承规则：优先继承距离最近的。
  • 常见可继承属性：

CSS中有许多可继承属性，这些属性可以被子元素继承并应用到其父元素。以下是一些常见的可继承属性：

可继承属性类可继承属性值
字体属性font、font-size、font-style、font-weight、line-height …
文本属性text-align、text-indent、text-transform、text-decoration …
颜色属性color
列表属性list-style、list-style-type、list-style-position …
表格属性border-collapse、border-spacing、caption-side …
元素可见性属性visibility
光标属性cursor

值得注意：并非所有的CSS属性都是可继承的，因此需要根据需要手动为子元素设置相应的样式。

优先级

  • 直观理解： !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * （通配符选择器）> 继承来的样式。
  • 细致分析：需计算权重
    在这里插入图片描述

总结

本章节，详细的聊了有关 CSS 选择器有关的知识，同时也分析了 CSS 选择器的 权重的计算方式，最后还总结了 CSS 的三大特性。毫无疑问，本章节知识点还是值得大家去参考学习的，这也是博主创作结束博文的初衷！

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

STM32之DMA

STM32之DMA

简介 • DMA （ Direct Memory Access ）直接存储器存取 （可以直接访问STM32内部存储器，如SRAM、程序存储器Flash和寄存器等） •DMA可以提供外设和存储器或者存储器和存储器之间的高速数据传输，无须CPU干预&a…
阅读更多...
解决内网拉取企微会话存档代理问题的一种办法

解决内网拉取企微会话存档代理问题的一种办法

问题：客户的服务都是内网的，不能直接访问外网；访问外网的话需要走kong网关才能出去。 会话存档官网说可以使用socket5、http方式拉取会话存档；我这边尝试了直接使用kong网关的ip和端口配置进去，是访问不了的 我后面就…
阅读更多...
Unity之Hololens如何实现3D物体交互

Unity之Hololens如何实现3D物体交互

一.前言 什么是Hololens? Hololens是由微软开发的一款混合现实头戴式设备，它将虚拟内容与现实世界相结合，为用户提供了沉浸式的AR体验。Hololens通过内置的传感器和摄像头，能够感知用户的环境，并在用户的视野中显示虚拟对象。这使得用户可以与虚拟内容进行互动，将数字信…
阅读更多...
《三国志》游戏的MySQL数据设计与管理

《三国志》游戏的MySQL数据设计与管理

在任何成功的游戏背后，都有一个精心设计和管理的数据系统。这不仅决定了游戏的运行效率，还直接影响到玩家的游戏体验。 本文将深入探讨著名游戏《三国志》中的数据设计和管理。本文将讲解游戏中核心的数据元素、数据管理方法，以及开发团队在数据方面所做的工作。 文章目录 …
阅读更多...
【CFD小工坊】浅水方程的离散及求解方法

【CFD小工坊】浅水方程的离散及求解方法

【CFD小工坊】浅水方程的离散及求解方法 前言基于有限体积法的方程离散界面通量与源项计算干-湿网格的处理数值离散的稳定性条件参考文献 前言 我们模型的控制方程，即浅水方程组的表达式如下： ∂ U ∂ t ∂ E ( U ) ∂ x ∂ G ( U ) ∂ y S ( U ) U…
阅读更多...
matlab 计算数组中所有值的均值

matlab 计算数组中所有值的均值

目录 一、概述1、算法概述2、主要函数3、输入参数4、输出参数二、代码实现三、结果展示四、参考链接本文由CSDN点云侠翻译，放入付费专栏只为防不要脸的爬虫。专栏值钱的不是本文，切勿因本文而订阅。 一、概述 1、算法概述 矩阵元素的平均值或均值。 2、主要函数<
阅读更多...
【kubernetes】kubernetes中的Deployment使用

【kubernetes】kubernetes中的Deployment使用

1 Why need Deployment? K8S中Pod是用户管理工作负载的基本单位&#xff0c;Pod通常通过Service进行暴露&#xff0c;因此&#xff0c;通常需要管理一组Pod&#xff0c;RC和RS主要就实现了一组Pod的管理工作&#xff0c;其中&#xff0c;RC和RS的区别在于&#xff0c;RS提供更…
阅读更多...
Golang的性能优化

Golang的性能优化

欢迎&#xff0c;学习者们&#xff0c;来到Golang性能优化的令人兴奋的世界&#xff01;作为开发者&#xff0c;我们都努力创建高效、闪电般快速的应用程序&#xff0c;以提供出色的用户体验。在本文中&#xff0c;我们将探讨优化Golang应用程序性能的基本技巧。所以&#xff0…
阅读更多...
uniapp h5 端 router.base设置history后仍有#号

uniapp h5 端 router.base设置history后仍有#号

manifest.json文件设置&#xff1a; "h5": { "router": { "base": "./", "mode": "history" }, }按相对路径发行时路由模式强制为hash模式&#xff0c;不支持history模式&#xff08;两者相悖&#xff09;…
阅读更多...
提取PDF数据：Documents for PDF ( GcPdf )

提取PDF数据：Documents for PDF ( GcPdf )

在当今数据驱动的世界中&#xff0c;从 PDF 文档中无缝提取结构化表格数据已成为开发人员的一项关键任务。借助GrapeCity Documents for PDF ( GcPdf )&#xff0c;您可以使用 C# 以编程方式轻松解锁这些 PDF 中隐藏的信息宝藏。 考虑一下 PDF&#xff08;最常用的文档格式之一…
阅读更多...
Spark性能监测+集群配置

Spark性能监测+集群配置

spark-dashboard 参考链接 架构图 Spark官网中提供了一系列的接口可以查看任务运行时的各种指标 运行 卸载docker https://blog.csdn.net/wangerrong/article/details/126750198 sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest…
阅读更多...
An attempt was made to call the method xxx but it does not exist

An attempt was made to call the method xxx but it does not exist

场景 在公司项目中做配置迁移的时候&#xff0c;服务启动时报错 报错信息 Description:An attempt was made to call the method redis.clients.jedis.Jedis.<init>(Ljava/lang/String;IIIZLjavax/net/ssl/SSLSocketFactory;Ljavax/net/ssl/SSLParameters;Ljavax/net/…
阅读更多...
十五、异常（4）

十五、异常（4）

本章概要 Java 标志异常 特例&#xff1a;RuntimeException 使用 finally 进行清理 finally 用来做什么&#xff1f;在 return 中使用 finally缺憾&#xff1a;异常丢失 Java 标准异常 Throwable 这个 Java 类被用来表示任何可以作为异常被抛出的类。Throwable 对象可分为两…
阅读更多...
springboot和vue：七、mybatis/mybatisplus多表查询+分页查询

springboot和vue：七、mybatis/mybatisplus多表查询+分页查询

mybatisplus实际上只对单表查询做了增强&#xff08;速度会更快&#xff09;&#xff0c;从传统的手写sql语句&#xff0c;自己做映射&#xff0c;变为封装好的QueryWrapper。 本篇文章的内容是有两张表&#xff0c;分别是用户表和订单表&#xff0c;在不直接在数据库做表连接的…
阅读更多...
【Unity Build-In管线的SurfaceShader剖析_PBS光照函数】

【Unity Build-In管线的SurfaceShader剖析_PBS光照函数】

Unity Build-In管线的SurfaceShader剖析 在Unity Build-In 管线&#xff08;Universal Render Pipeline&#xff09;新建一个Standard Surface Shader文件里的代码如下&#xff1a;选中"MyPBR.Shader"&#xff0c;在Inspector面板&#xff0c;打开"Show generat…
阅读更多...
web：[极客大挑战 2019]PHP

web：[极客大挑战 2019]PHP

题目 点进页面显示如下 根据页面提示&#xff0c;这个网站有备份文件&#xff0c;备份文件一般是bak文件格式&#xff0c;用dirsearch扫描 访问之后下载了一个文件 里面都是一些代码 在index.php中发现了一个类的文件&#xff0c;一个get传参&#xff0c;然后将传进的值进行反序…
阅读更多...
Java性能调优必备知识学习路线

Java性能调优必备知识学习路线

性能调优是Java开发中一个非常重要的环节&#xff0c;它可以帮助我们提高系统的性能、稳定性、可靠性和用户体验&#xff0c;从而提高用户体验和企业竞争力。 目录 一、为什么要学习Java性能调优&#xff1f; 二、如何做好性能调优&#xff1f; 2.1 扎实的计算机基础 2.2 …
阅读更多...
Redis与分布式-集群搭建

Redis与分布式-集群搭建

接上文 Redis与分布式-哨兵模式 1. 集群搭建 搭建简单的redis集群&#xff0c;创建6个配置&#xff0c;开启集群模式&#xff0c;将之前配置过的redis删除&#xff0c;重新复制6份 针对主节点redis 1&#xff0c;redis 2&#xff0c;redis 3都是以上修改内容&#xff0c;只是…
阅读更多...
集合-ArrayList源码分析(面试)

集合-ArrayList源码分析(面试)

系列文章目录 1.集合-Collection-CSDN博客​​​​​​ 2.集合-List集合-CSDN博客 3.集合-ArrayList源码分析(面试)_喜欢吃animal milk的博客-CSDN博客 目录 系列文章目录 前言 一 . 什么是ArrayList? 二 . ArrayList集合底层原理 总结 前言 大家好,今天给大家讲一下Arra…
阅读更多...
最优化：建模、算法与理论（最优性理论

最优化：建模、算法与理论（最优性理论

第五章 最优性理论 在实际中最优化问题的形式多种多样&#xff0c;给定一类具体的优化问题&#xff0c;我们首先需要分析其解的存在性。如果优化问题的解存在&#xff0c;再考虑如何设计算法求出最优解&#xff0c;一般的非凸优化问题可能存在很多局部极小解&#xff0c;但其往…
阅读更多...
最新文章

Copyright @ 2022~2023