【前段基础入门之】=＞你不知道的 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.mzph.cn/news/92048.shtml

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

相关文章

【模型压缩】Distiller学习-初认识

【模型压缩】Distiller学习-初认识

Distiller学习-初认识 简介 Intel AILab的神经网络压缩框架，建立在Pytorch基础上 安装 压缩方法 权重正则化方法权重剪枝方法训练后量化方法训练时量化方法条件计算低质分解方法知识蒸馏方法 总体目录 核心代码实现 所有案例的配置文件 举例 初始化网络评价网络…
阅读更多...
SpringMVC处理请求流程

SpringMVC处理请求流程

一、前言 SpringMVC是一个基于Java的轻量级Web框架，它使用Model-View-Controller（MVC）设计模式来处理Web请求。 二、请求实现 1、用户发送请求：用户通过浏览器或其他客户端工具向服务器发送一个HTTP请求，请求中包含…
阅读更多...
hadoop.ipc:Client

hadoop.ipc:Client

org.apache.hadoop.ipc:Client []- Failed to connect towgqccbsun07/172.29.100.147:8032:server:retries get failed due to exceeded maximum allowed retries number:参考YARN 切换ResourceManager（Failed to connect to server:8032 retries get failed due to…
阅读更多...
基于Vue和Element UI实现前后端分离和交互

基于Vue和Element UI实现前后端分离和交互

目录 前言 一、Element UI简介 1.Element UI是什么 2.Element UI的特点 二、项目搭建 1.创建一个SPA项目 2.安装 Element-UI 3.导入组件 4.创建登陆注册界面 登录组件---Login.vue 注册组件---Register.vue 定义组件与路由的对应关系 效果演示： 三、前…
阅读更多...
1.4.C++项目：仿muduo库实现并发服务器之buffer模块的设计

1.4.C++项目：仿muduo库实现并发服务器之buffer模块的设计

项目完整版在： 一、buffer模块： 缓冲区模块 Buffer模块是一个缓冲区模块，用于实现通信中用户态的接收缓冲区和发送缓冲区功能。 二、提供的功能 存储数据，取出数据 三、实现思想 1.实现换出去得有一块内存空间，采…
阅读更多...
Redis与分布式-集群搭建

Redis与分布式-集群搭建

接上文 Redis与分布式-哨兵模式 1. 集群搭建 搭建简单的redis集群，创建6个配置，开启集群模式，将之前配置过的redis删除，重新复制6份 针对主节点redis 1，redis 2，redis 3都是以上修改内容，只是…
阅读更多...
string模拟实现

string模拟实现

string模拟实现 整体代码 #pragma once #include<assert.h>namespace hqj {class string{public:friend ostream& operator<<(ostream& _cout, const hqj::string& s);friend istream& operator>>(istream& _cin, hqj::string& s)…
阅读更多...
十、空闲任务及其钩子函数

十、空闲任务及其钩子函数

1、空闲任务的介绍 (1)一个良好的程序&#xff0c;它的任务都是事件驱动的&#xff1a;平时大部分时间处于阻塞状态。 (2)有可能我们自己创建的所有任务都无法执行&#xff0c;但是调度器必须能找到一个可以运行的任务。所以&#xff0c;我们要提供空闲任务。 (3)在使用vTas…
阅读更多...
格拉姆角场GAF将时序数据转换为图像并应用于凯斯西楚大学轴承故障诊断（Python代码，CNN模型）

格拉姆角场GAF将时序数据转换为图像并应用于凯斯西楚大学轴承故障诊断（Python代码，CNN模型）

1.运行效果&#xff1a; 格拉姆角场GAF将时序数据转换为图像并应用于故障诊断&#xff08;Python代码&#xff09;_哔哩哔哩_bilibili 环境库 只要tensorflow版本大于等于2.4.0即可运行 2.GAF的内容 GAF是一种用于时间序列数据可视化和特征提取的技术&#xff0c;通常用于…
阅读更多...
计算机网络两位伟人

计算机网络两位伟人

克劳德艾尔伍德香农 克劳德艾尔伍德香农&#xff08;Claude Elwood Shannon&#xff09;是一位美国数学家、电子工程师和计算机科学家&#xff0c;被誉为“信息论之父”。他于1916年生于密歇根州&#xff0c;于2001年去世。以下是一些关于他的详细介绍&#xff1a; 信息论的奠…
阅读更多...
蓝桥等考Python组别八级007

蓝桥等考Python组别八级007

第一部分：选择题 1、Python L8 （15分） 运行下面程序，输出的结果是（ ）。 i = 2 while i < 5: print(i, end = ) i += 1 2 3 4 5 61 2 3 4 52 3 43 4 5正确答案：C 2、Python L8 （
阅读更多...
Linux——补充点（进程切换及页表映射）

Linux——补充点（进程切换及页表映射）

目录 补充点1&#xff1a;进程地址空间堆区管理 补充点2&#xff1a;Linux内核进程上下文切换 补充点3&#xff1a;页表映射 补充点4&#xff1a;两级页表 补充点1&#xff1a;进程地址空间堆区管理 Linux内核通过一个被称为进程描述符的task_struct结构体来管理进程&#…
阅读更多...
keil调试的时候没问题，下载时候没反应

keil调试的时候没问题，下载时候没反应

今天遇到这样一个问题。我下载商家的代码例程后单片机没反应&#xff0c;进入调试的时候一切正常。很奇怪&#xff0c;在网上找了教程问题解决&#xff0c;总结一下。 原因在于程序下载进去后没有按下复位键&#xff0c;导致还是之前的程序。我之前设置的是下载后自动复位运行…
阅读更多...
【STL】用一棵红黑树封装map和set

【STL】用一棵红黑树封装map和set

⭐博客主页&#xff1a;️CS semi主页 ⭐欢迎关注&#xff1a;点赞收藏留言 ⭐系列专栏&#xff1a;C进阶 ⭐代码仓库&#xff1a;C进阶 家人们更新不易&#xff0c;你们的点赞和关注对我而言十分重要&#xff0c;友友们麻烦多多点赞&#xff0b;关注&#xff0c;你们的支持是我…
阅读更多...
玩转gpgpu-sim 04记—— __cudaRegisterBinary() of gpgpu-sim 到底做了什么

玩转gpgpu-sim 04记—— __cudaRegisterBinary() of gpgpu-sim 到底做了什么

官方文档&#xff1a; GPGPU-Sim 3.x Manual __cudaRegisterBinary(void*) 被执行到的代码逻辑如下&#xff1a; void** CUDARTAPI __cudaRegisterFatBinary( void *fatCubin ) { #if (CUDART_VERSION < 2010)printf("GPGPU-Sim PTX: ERROR ** this version of GPGPU…
阅读更多...
asp.net core mvc区域路由

asp.net core mvc区域路由

ASP.NET Core 区域路由&#xff08;Area Routing&#xff09;是一种将应用程序中的路由划分为多个区域的方式&#xff0c;类似于 MVC 的控制器和视图的区域划分。区域路由可以帮助开发人员更好地组织应用程序的代码和路由&#xff0c;并使其更易于维护。 要使用区域路由&#…
阅读更多...
小程序如何设置余额充值

小程序如何设置余额充值

在小程序中设置余额充值是一种非常有效的方式&#xff0c;可以帮助商家吸引更多的会员并提高用户的消费频率。下面将介绍如何在小程序中设置余额充值并使用。 第一步&#xff1a;创建充值方案 在小程序管理员后台->营销管理->余额充值页面&#xff0c;添加充值方案。可…
阅读更多...
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…
阅读更多...
Linux系统编程（七）：线程同步

Linux系统编程（七）：线程同步

参考引用 UNIX 环境高级编程 (第3版)黑马程序员-Linux 系统编程 1. 同步概念 所谓同步&#xff0c;即同时起步、协调一致。不同的对象&#xff0c;对 “同步” 的理解方式略有不同 设备同步&#xff0c;是指在两个设备之间规定一个共同的时间参考数据库同步&#xff0c;是指让…
阅读更多...
小白继续深入学习C++

小白继续深入学习C++

第1节 指针的基本概念 1、变量的地址&#xff1a; 变量是内存地址的简称&#xff0c;在C中&#xff0c;每定义一个变量&#xff0c;系统就会给变量分配一块内存&#xff0c;内存是有地址的。 C用运算符&获取变量在内存中的起始地址。 语法&#xff1a; &变…
阅读更多...
最新文章

Copyright @ 2022~2023