选择器（设置样式的元素）
创始人
2025-05-31 02:16:47

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

文章目录

  • 系列文章目录
    • 1.基本选择器
      • 1.通配符选择器
      • 2.元素选择器
      • 3.id 选择器
      • 4.class 选择器
      • 5.群组选择器
      • 6.伪类选择器
      • 7.后代选择器
      • 8.伪元素选择器
    • 2.优先级规则

1.基本选择器

1.通配符选择器

* {}

*选择的是当前页面中所有的元素

2.元素选择器

	元素名称 {}

选择的是 当前页面中的 某一类元素

3.id 选择器

# id {}

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
id 是独一无二的

4.class 选择器

.class {}

class 选择器用于描述一组元素的样式，
class 选择器有别于id选择器，class可以在多个元素中使用
一个元素可以设置多个类名

5.群组选择器

使用逗号（,）表示
把多个选择器写在一起，方便样式的组织管理，组内的选择器是任意类型的

6.伪类选择器

  • 伪类，用于向某些选择器添加特殊的效果。

  • 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上

  • 设置 a标签 的四种状态
    1. :link访问前的状态
    2. :visited访问后的状态
    3. :hover鼠标移入效果
    4. :active激活状态(按下未松开)

需要注意的是：除了超链接的4种伪类选择器之外，其他伪类和伪对象选择器不被 IE6 及其以下版本浏览器支持

7.后代选择器

使用空格（ ）表示
前面的一个选择器表示包含框对象的选择器，而后面的选择器表示被包含的选择器

8.伪元素选择器

  • 伪元素，是html中不存在的元素，仅在css中用来渲染的，伪元素创建了一个虚拟容器，
  • 这个容器不包含任何DOM元素，但是可以包含内容
  1. ::after 在选择器后增加内容
  2. ::before 在选择器前增加内容
  3. ::first-letter 选择器的首字母
  4. ::first-line 选择器的首行
  5. ::selection 被用户选取的部分

2.优先级规则

  • 规则1：最近的祖先样式比其他祖先样式优先级高
  • 规则2："直接样式"比"祖先样式"优先级高
  • 规则3：优先级关系：内联样式 > ID 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器
  • 规则4：权重原则 （内联） 1000、（id） 0100、（类，伪类，属性） 0010、（元素，伪元素） 0001、其他 0000、继承属性没有权重
  • 规则5：属性后插有 !important 的属性拥有最高优先级,若同时存在，则再利用规则 3、4 判断优先级
词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：【IoT】嵌入式Linux开发：LCD设备驱动

下一篇：vue项目局域网前后端接口对接相关设置

相关内容

热门资讯

黄瓜胶有什么好处 极速百科网 ... 黄瓜胶的好处有以下几点： 1、美白肌肤：黄瓜胶里面维生素C的含量非常多，能够有助于抑制黑色素的...
包公断案的歇后语,标题建议：《... 包公断案——铁面无私收到你的喜欢啦收到你的喜欢啦标题建议：《包公断案：公正无私，铁面无私的典范》包公...
硫离子的电子式怎么写,硫离子的... 硫离子的电子式为：S2-。硫是一种非金属元素，原子序数为16，在元素周期表中位于第三周期的VIA族。...
摇滚og是什么意思,摇滚OG指... 摇滚OG指的是元老级的摇滚歌手，是对这些歌手的肯定和赞扬。收到你的喜欢啦收到你的喜欢啦摇滚OG指的是...
用队列实现栈和用栈实现队列（C... 目录 一、用队列实现栈 二、 用栈实现队列 一、用队列实现栈 请你仅使用两个队列实现一个后入先出&...
代码随想录刷题-哈希表-两数之... 文章目录两数之和习题暴力解法哈希表 两数之和 本节对应代码随想录中：代码随想录...
凌恩生物明星产品：让你读懂细胞... 叶绿体和线粒体是真核细胞中不可或缺的重要细胞器，是第二套遗传信息系统，与...
密码如何“加盐加密”处理？程序... 目录 前言 一、手写加盐算法 1.1、加密 1.1.1、加密思路 1.1.2、加密简图 1.1.3、...
黑化什么意思网络用语 极速百科... 黑化，词语，也可指性情大变，比如原本某A是个文青，温文尔雅，突然某天某A大开杀戒，残忍无比，这就是所...
带有古和今的成语,古今的对话：... 带有古和今的成语有很多，例如：古为今用、古往今来、古稀之年、古今中外等等。这些成语都包含了古代和现代...
能力强的人有什么特点,标题建议... 能力强的人往往具备以下特点： 1. 学习能力：能力强的人通常能够快速学习新知识和技能，并能够灵...
跑步机怎么操作大图 极速百科网... 1. 启动跑步机：首先，确保跑步机已经插上电源，然后打开跑步机的电源开关。大多数跑步机都有一个启动/...
ELK+Filebeat+Ka... 文章目录ELK+Filebeat+Kafka分布式日志管理平台搭建为什么选择ELK&...
哈希结构的代码实现（开散列、闭... 哈希结构 unordered系列的关联式容器之所以查找效率比较高，是因为其底层使用了哈...
Java Annotation... 注解 注解（Annotation），又称元数据ÿ...
bim装配式工程师证书有用吗,... 首先，我们需要明确一点，那就是BIM装配式工程师证书肯定是有用的。这个证书证明了持有人掌握了BIM技...
什么东西可以深层清洁毛孔 极速... 首先，我们要明白，毛孔的深层清洁不仅仅是指清洁面部皮肤，还包括清洁身体和头发的毛孔。接下来，我将为你...
vip全称 极速百科网 极速百... VIP的英文全称为Very Important Person，中文翻译为重要人物、要员。一般指VIP...
公共交通工具有哪些 极速百科网... 1. 城市公交：这是大家最熟悉的公共交通工具之一，提供在城市内部的运输服务。公交车根据不同的大小和座...
智能火焰与烟雾检测系统（Pyt... 摘要：智能火焰与烟雾检测系统用于智能日常火灾检测报警，利用摄像头画面实时...
【学习笔记】《Writing ... 文章目录14 Energizing Writing 充满活力的写作14.1. ACTIVE VERS...
基于R语言因果关系推断模型实践... 通过数据得到可靠的因果关系一直是科学研究的主要目标之一。对因果关系的研究已经有千年之久；...
手机qq里怎么分组,手机QQ分... 1. 打开QQ应用，进入联系人界面。 2. 找到你想要分组的联系人或群聊。 3. 长按想...
带指的成语有哪些 极速百科网 ... 指日高升、一指蔽目、屈指可数、十指连心、三指佞臣、染指垂涎、戟指怒目、屈指可数。 如需更多含有...
第十八天 Vue-前端工程化总... 目录 Vue-前端工程化 1. 前后端分离开发 1.1 介绍 1.2 Yapi 2. 前端工程化 2...
急用钱公积金怎么提现,公积金提... 1. 了解公积金提现的条件和手续。在您考虑提现之前，请务必了解您所在地区的具体规定和要求。通常，您需...
杯子刻字励志八个字,志存高远，... 杯子刻字励志八个字建议如下： 1. 志存高远，自强不息。 2. 持之以恒，锐意进取。 ...
YOLOV4详解 1. 为什么要学习YOLOV4? 通过学习YOLOV3这个很重要的算法, 可以学习到作者重新设计Da...
提高曝光率：外贸网站如何充分利... 自从我从事外贸行业以来，谷歌优化一直是我关注的重点。 作为一个外贸从业者，...
Vue3 学习总结补充（一） 文章目录1、Vue3中为什么修改变量的值后，视图不更新？2、使用 ref...