【前端基础】8、CSS的选择器

news2025/5/14 1:42:07

一、什么是选择器?

根据一定的规则选出符合条件的HTML元素,从而为他们添加各种特定的样式。

二、选择器分类

  1. 通用选择器
  2. 元素选择器
  3. 类选择器
  4. id选择器
  5. 属性选择器
  6. 后代选择器
  7. 兄弟选择器
  8. 选择器组
  9. 伪类

三、通用选择器(*

作用:帮我们选中所有的元素。
*就是通配符一样的,它会匹配所有元素。包括html元素
在这里插入图片描述

一般实际操作中不使用。
因为它会把所有元素都匹配一边,哪怕你的HTML文件中都没有用到的元素。

四、元素选择器

使用元素的名称。
在这里插入图片描述

五、类选择器

使用.class名。也就是:.类名
所有使用这个class名的元素都会有同一个样式。
但是因为css的层叠特性等等,所有不一定是所有的样式会有这个样式,会存在覆盖。
在这里插入图片描述

六、id选择器

使用#id名。同一个HTML中就一个id。保持唯一性。

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

七、属性选择器

在这里插入图片描述

例子:
在这里插入图片描述
在这里插入图片描述

八、后代选择器

1、所有后代
在这里插入图片描述

例子:

  1. HTML结构
    在这里插入图片描述
  2. 目标:选择home下的span
    在这里插入图片描述
  3. 结果
    在这里插入图片描述
    1、只有一个后代(直接子代)。
    在这里插入图片描述

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

小米网站中的示例:
在这里插入图片描述

九、兄弟选择器

在这里插入图片描述
例子:
在这里插入图片描述
在这里插入图片描述

十、选择器组

  1. 交集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 并集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

十一、伪类(非常粗略的描述)

  1. 什么是伪类
    选择器的一种,用于选择处于特定状态的元素。
    最常见的现象:鼠标放在某些文字上面,文字就会加上颜色。
    鼠标没放上去之前:
    在这里插入图片描述
    鼠标放上去之后:
    在这里插入图片描述

  2. 常见伪类
    最最常用: :hover ,其他的,需要就查吧。
    在这里插入图片描述
    其他博客1
    其他博客2
    其他博客3

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

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

相关文章

Gitee Team:关键领域行业DevSecOps落地的项目管理引擎

在全球数字化转型浪潮下,关键领域行业的软件研发正面临前所未有的挑战与机遇。国产化进程的加速推进与国防装备的智能化转型,对软件研发效能和质量提出了更高要求。在这样的背景下,Gitee Team作为国内领先的研发协作平台,正在为关…

网址为 http://xxx:xxxx/的网页可能暂时无法连接,或者它已永久性地移动到了新网址

这是由于浏览器默认的非安全端口所导致的,所谓非安全端口,就是浏览器出于安全问题,会禁止一些网络浏览向外的端口。 避免使用6000,6666这样的端口 6000-7000有很多都不行,所以尽量避免使用这个区间 还有在云服务器中&#xff0c…

鸿蒙跨平台开发教程之Uniapp布局基础

前两天的文章内容对uniapp开发鸿蒙应用做了一些详细的介绍,包括配置开发环境和项目结构目录解读,今天我们正式开始写代码。 入门新的开发语言往往从Hello World开始,Uniapp的初始化项目中已经写好了一个简单的demo,这里就不再赘述…

uniapp使用npm下载

uniapp的项目在使用HBuilder X创建时是不会有node_modules文件夹的,如下图所示: 但是uni-app不管基于哪个框架,它内部一定是有node.js的,否则没有办法去实现框架层面的一些东西,只是说它略微有点差异。具体差异表现在…

C# 的异步任务中, 如何暂停, 继续,停止任务

namespace taskTest {using System;using System.Threading;using System.Threading.Tasks;public class MyService{private Task? workTask;private readonly SemaphoreSlim semaphore new SemaphoreSlim(0, 1); // 初始为 0,Start() 启动时手动放行private read…

2025年AI工程师认证深度解析:AAIA认证体系全景指南与实战策略

一、IAAAI认证体系演进与价值定位 1.1 国际人工智能认证发展现状 全球人工智能认证市场呈现显著分化态势。据Gartner 2025Q1报告显示,北美市场以IEEE/ACM双认证体系为主导(市占率38%),欧盟区推行AI Act合规认证(强制…

统计服务器CPU、内存、磁盘、网络IO、队列、数据库占用空间等等信息

文章目录 一、背景二、说明三、页面四、代码 前端 MonitorServiceProcessPage.vueMonitorServiceProcessTable.vueMonitorServiceProcessTableButton.vueaddMonitorTask.vueproductOperation.vueshowMonitorTask.vueMonitorSystemLog.vueMonitorTask.vueMonitorTaskLog.vueReal…

-MAC桢-

MAC桢和IP的关系: 主机A想跨网络和B通信需要IP地址进行路由选择,但一个局域网,比如路由器进行路由选择之前,首先要将数据包发送给路由器B,也就是局域网通信也就是同一个网段的主机进行通信,所以必须通过mac…

安装:Kali2025+Docker

安装:Kali2025Docker Kali2025安装 直接官网下载WMware版本 https://www.kali.org/get-kali/#kali-virtual-machines 直接打开运行 初始用户密码 kali/kali sudo -i 命令切换到root 更换镜像 切换到其他可用的 Kali Linux 镜像源可能会解决问题,可以使用国内的镜像源&…

Linux云计算训练营笔记day04[Rocky Linux中的命令:mv、cp、grep(^$)、tar、重定向>和>>]

mv 移动(剪切) 源数据会消失 格式: mv 源文件 目标路径 touch /opt/a.txt 创建文件 mv /opt/a.txt /root 移动文件,没有改名 mkdir gongli 创建目录 mv gongli /opt/ 移动目录,没有改名 mv /opt/gongli tedu 移动目录,改名了 …

AbMole Olaparib:打破常规,用PARP抑制重塑肿瘤研究

在当今的生物医学研究领域,Olaparib(AZD2281,AbMole,M1664)作为一种重要的PARP(聚腺苷二磷酸核糖聚合酶)抑制剂,受到了广泛关注。Olaparib可干扰 DNA 单链断裂的修复,从而…

Windows重置网络,刷新缓存

同时按键盘上的【Windows】键和【S】键,弹出搜索框,输入 命令提示符 在“最佳匹配”下的【命令提示符】上右键,点击【以管理员身份运行】 1弹出一个窗口,在光标闪烁的位置,直接输入【netsh winsock reset】&#xff0…

OpenHarmony平台驱动开发(十),MMC

OpenHarmony平台驱动开发(十) MMC 概述 功能简介 MMC(MultiMedia Card)即多媒体卡,是一种用于固态非易失性存储的小体积大容量的快闪存储卡。 MMC后续泛指一个接口协定(一种卡式)&#xff0…

解决IDEA无法运行git的问题

之前git一直没有问题,今天打开就提示我安装git,自然用git去提交新项目也会遇到问题。 我出现问题的原因是:git路径缺失 文件->设置->git 发现git的路径为空,按照实际位置填写即可

HTTP 响应状态码总结

一、引言 HTTP 响应状态码是超文本传输协议(HTTP)中服务器对客户端(通常是 Web 浏览器)请求的响应指示。这些状态码是三位数字代码,用于告知客户端请求的结果,包括请求是否成功。响应被分为五个类别&#…

【Qt】Qt 构建系统详解:qmake 入门到项目实战

Qt 构建系统详解:qmake 入门到项目实战 本文将系统介绍 Qt 构建工具 qmake 的用法,并通过一个完整的项目结构示例,帮助你掌握 .pro 文件编写、子项目管理、模块依赖等核心技能。 🧭 一、什么是 qmake? qmake 是 Qt 提…

《Zabbix Proxy分布式监控实战:从安装到配置全解析》

注意:实验所需的zabbix服务器的搭建可参考博客 zabbix 的docker安装_docker安装zabbix-CSDN博客 1.1 实验介绍 1.1.1 实验目的 本实验旨在搭建一个基于Zabbix的监控系统,通过安装和配置Zabbix Proxy、MySQL数据库以及Zabbix Agent,实现分…

华为配置篇-RSTP/MSTP实验

MSTP 一、简介二、常用命令总结三、实验 一、简介 RSTP(快速生成树协议)​ RSTP(Rapid Spanning Tree Protocol)是 STP 的改进版本,基于 ​​IEEE 802.1w 标准​​,核心目标是解决传统 STP 收敛速度慢的问…

git如何将本地 dev 分支与远程 dev 分支同步

要让本地 dev 分支与远程 dev 分支完全同步(丢弃本地多余的提交记录),可以按照以下步骤操作: 1. ​​获取远程最新状态​ git fetch origin dev # 拉取远程 dev 分支的最新提交,但不会修改本地代码 IDEA中点击fetc…

Unity基础学习(九)输入系统全解析:鼠标、键盘与轴控制

目录 一、Input类 1. 鼠标输入 2. 键盘输入 3. 默认轴输入 (1) 基础参数 (2)按键绑定参数 (3)输入响应参数 (4)输入类型与设备参数 (5)不同类型轴的参…