006 CSS常见选择器 CSS伪类 CSS伪元素

文章目录

  • CSS选择器
    • 什么是CSS选择器
    • 选择器分类
    • 通用选择器
    • 简单选择器(重要)
    • 属性选择器(了解即可)
    • 后代选择器(重要)
    • 兄弟选择器(理解)
    • 选择器组(重要)
  • 伪类
    • 动态伪类
  • 伪元素(pseudo-elements)

CSS选择器

什么是CSS选择器

按照一定的规则选出符合条件的元素,为之添加CSS样式

选择器分类

通用选择器(universal selector)
元素选择器(type selectors)
类选择器(class selectors)
id选择器(id selectors)
属性选择器(attribute selectors)
组合(combinators)
伪类(pseudo-classes)
伪元素(pseudo-elements)

通用选择器

所有的元素都会被选中
一般用来给所有元素作一些通用性的设置:
比如内边距、外边距
比如重置一些内容

简单选择器(重要)

元素选择器:使用元素的名称
类选择器:使用.类名
id选择器:使用#id

id注意事项:
一个HTML文档里面的id值是唯一的,不能重复
id值如果由多个单词组成,单词之间可以用中划线-、下划线_连接,也可以用驼峰标识
最好不要用标签名作为id1值

属性选择器(了解即可)

拥有某一个属性[att]
属性等于某个值[att=val]

[attr*=val]:属性值包含某一个值val;
[attr^=val]:属性值以val开头;
[attr$=val]:属性值以val结尾;
[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]:属性值包含val,如果有其他值必须以空格和val分割

后代选择器(重要)

后代选择器一:所有的后代(直接/间接的后代)
选择器之间以空格分隔

后代选择器二:直接子代选择器(必须是直接子代)
选择器之间以>分割;

兄弟选择器(理解)

兄弟选择器一:相邻兄弟选择器
使用符号+连接

兄弟选择器二:普遍兄弟选择器
使用符号~连接

选择器组(重要)

交集选择器:需要同时符合两个选择器条件(两个选择器紧密连接)
为了精准的选择某一个元素

并集选择器:符合一个选择器条件即可(两个选择器以,号分割)
为了给多个元素设置相同的样式

伪类

伪类(Pseudo-classes)是选择器的一种,它用于选择处于特定状态的元素

常见的伪类有
1动态伪类(dynamic pseudo-classes)
:link、:visited、:hover、:active、:focus

2.目标伪类(target pseudo-classes)
:target

3.语言伪类(language pseudo-classes)
:lang()

4.元素状态伪类(UI element states pseudo-classes)
:enabled、:disabled、:checked

5.结构伪类(structural pseudo-classes)
:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
:first-child、:last-child、:first-of-type、:last-of-type
:root、:only-child、:only-of-type、:empty

6.否定伪类(negation pseudo-classes)
:not()
所有的伪类:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

动态伪类

使用举例
a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上(重要)
a:active 激活的链接(鼠标在链接上长按住未松开)

使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
建议编写顺序:link 、:visited、:hover、:active

除了a元素,:hover、:active也能用在其他元素上

:focus指当前拥有输入焦点的元素(能接收键盘输入)
文本输入框一聚焦后,背景就会变红色

因为链接a元素可以被键盘的Tab键选中聚焦,所以:focus也适用于a元素

动态伪类编写顺序建议为
:link、:visited、:focus、:hover、:active

直接给a元素设置样式,相当于给a元素的所有动态伪类都设置了
相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red

伪元素(pseudo-elements)

常见的伪元素
:first-line、::first-line
:first-letter、::first-letter
:before、::before
:after、::after

为了区分伪元素和伪类,建议伪元素使用2个冒号

::first-line可以针对首行文本设置属性
::first-letter可以针对首字母设置属性

::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)
常通过content属性来为一个元素添加修饰性的内容

<html><head><style>.box::before {content: "123";color: red;}.box::after {content: "321";color: blue;}</style></head><body><div class="box">div元素</div></body></html>
<html><head><style>.box5::after {content: "";display:inline-block;width: 8px;height: 8px;background-color: #f00}</style></head><body></body>
</html>

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

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

相关文章

【51单片机入门记录】A/D、D/A转换器PCF859应用

目录 一、IIC初始化代码 二、开发板电路图 三、PCF8591读/写字节操作流程及相关函数 &#xff08;1&#xff09;PCF8591&#xff08;AD&#xff09;读操作流程及代码 &#xff08;2&#xff09;PCF8591&#xff08;AD&#xff09;写操作流程及代码 四、应用示例-显示电压…

Spark面试整理-解释Spark MLlib是什么

Apache Spark的MLlib(Machine Learning Library)是一个构建在Spark之上的机器学习库,旨在处理大规模的数据分析和挖掘任务。MLlib提供了一系列高效的算法和工具,这些工具被设计为可扩展和易于集成到大数据应用和流程中。以下是Spark MLlib的一些主要特点: 1. 广泛的机器学…

react组件:strictmode

帮助你在开发过程中尽早地发现组件中的常见错误。 ** 严格模式启用了以下仅在开发环境下有效的行为&#xff1a; 组件将 重新渲染一次&#xff0c;以查找由于非纯渲染而引起的错误。 组件将 重新运行 Effect 一次&#xff0c;以查找由于缺少 Effect 清理而引起的错误。 组件将…

论文笔记:UNDERSTANDING PROMPT ENGINEERINGMAY NOT REQUIRE RETHINKING GENERALIZATION

ICLR 2024 reviewer评分 6888 1 intro zero-shot prompt 在视觉-语言模型中&#xff0c;已经取得了令人印象深刻的表现 这一成功呈现出一个看似令人惊讶的观察&#xff1a;这些方法相对不太受过拟合的影响 即当一个提示被手动工程化以在给定训练集上达到低错误率时&#xff0…

Unity3D 编辑器扩展与框架工具合成详解

前言 Unity3D的编辑器扩展和框架工具则是为了进一步提高开发效率和扩展性而设计的。本文将详细介绍Unity3D的编辑器扩展与框架工具的合成&#xff0c;包括技术详解和代码实现。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希望大家可以点击进来一起交流一下开发…

学习心得1

这时我第一次更学习心得&#xff01;不足的在评论区指教。 首先先来分享一下&#xff0c;刷一维数组题目的方法。 仔细读题&#xff0c;不会做的题目先完成输入输出。不要干等着着急&#xff0c;就跳到下一题。如果使用的时oj&#xff0c;那就没有题解但是使用洛谷、LeetCood…

Prometheus+grafana监控nacos和spring-boot服务(增加自定义指标)(七)

前面记录了项目中常用的各种中间件的指标采集器的用法及搭建方式 &#xff0c; 由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前六篇链接如下 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana…

LeetCode - 边积分最高的节点

2374. 边积分最高的节点 这是一个有向图&#xff0c;且每个节点都只有一条出边&#xff0c;指向0的边有1&#xff0c;2&#xff0c;3&#xff0c;4 10&#xff0c; 指向7的有5&#xff0c;6 11. 我们只需要一次遍历就可以解决&#xff0c;先搞一张哈希表&#xff0c;k存节点…

解决VScode中matplotlib图像中文显示问题

一、更改配置文件 参考这个文件路径找到自己Python环境下的matplotlibrc文件并用记事本打开。 用ctrl F寻找下面的这两行并将前面的#删除&#xff0c;保存并退出。 font.family: sans-serif font.serif: DejaVu Serif, Bitstream Vera Serif, Computer Modern Roman, N…

Day31|贪心算法part01:理论基础、455.分发饼干、376. 摆动序列、53. 最大子序和

理论基础 记得贪心没有规律即可&#xff01;解不出来就看题解。 455. 分发饼干 先把学生和饼干都排序&#xff08;Arrays.sort只能升序&#xff09;&#xff0c;然后都从后往前遍历&#xff0c;把最大的饼干给需求最大的孩子&#xff08;贪心&#xff09; class Solution {…

计算机提示msvcp120.dll怎么解决,7种详细有效修复方法分享

在Windows操作系统的庞大舞台上&#xff0c;每一个组件都扮演着其独特的角色。在这些不为人知的角色中&#xff0c;有一个名为msvcp120.dll的文件&#xff0c;它是Visual C运行时库的一部分&#xff0c;对于确保许多应用程序的正常运行至关重要。本文将深入探讨msvcp120.dll文件…

【项目实战】——商品管理的制作完整代码

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

逐步学习Go-WaitGroup【连字都懒得写了,直接Show my Code】

package waitgroup_testimport ("fmt""runtime""sync""testing""time""github.com/stretchr/testify/assert" )// 这是对Go语标准库中sync包下的WaitGroup的描述。// WaitGroup用于等待一组并发的goroutine结结束…

安卓APP的技术质量:如何提高

安卓APP的技术质量:如何提高 技术质量包括稳定性和性能,还有资源工具化程序.你的APP 的技术质量能够影响你的用户体验.一个高质量的体验不仅 最小化了技术问题的存在,而且也最大化地利用了安卓操作 系统和设备硬件的能力. 为了构建一个高质量的APP,遵循如下的指导原则: 形式因…

重新排序(贪心+差分)

题目 给定一个数组 A 和一些查询 Li,Ri&#xff0c;求数组中第 Li 至第 Ri 个元素之和。 小蓝觉得这个问题很无聊&#xff0c;于是他想重新排列一下数组&#xff0c;使得最终每个查询结果的和尽可能地大。 小蓝想知道相比原数组&#xff0c;所有查询结果的总和最多可以增加多…

非关系型数据库-----------探索 Redis高可用 、持久化、性能管理

目录 一、Redis 高可用 1.1什么是高可用 1.2Redis的高可用技术 二、 Redis 持久化 2.1持久化的功能 2.2Redis 提供两种方式进行持久化 三、Redis 持久化之----------RDB 3.1触发条件 3.1.1手动触发 3.1.2自动触发 3.1.3其他自动触发机制 3.2执行流程 3.3启动时加载…

在深度学习模型中引入先验

当面对复杂问题的时候&#xff0c;在深度学习模型提取特征的过程中完全抛弃知识是非常不明智的策略。虽然有很多研究者在深度网络处理数据之前&#xff0c;利用具有某种知识的模型驱动方法对数据进行预处理&#xff0c;但是这种方法没有进行实质性地改造深度网络&#xff0c;且…

ms-前端八股文

1、暂时性死区 是指在 JavaScript 中使用 let 或 const 声明变量时&#xff0c;变量在其声明之前不能被访问或使用的特性。 var可以变量提升&#xff08;在 JavaScript 中&#xff0c;变量声明提升是指在执行代码之前&#xff0c;变量声明会被提升到作用域的顶部。&#xff0…

scRAN-seq|加权最近邻分析(1)

概述 本文[1]介绍了Seurat 5.0.0中的加权最近邻&#xff08;WNN&#xff09;分析方法&#xff0c;这是一种用于整合和分析多模态单细胞数据的无监督框架。 简介 多模态分析作为单细胞基因组学的一个新兴领域&#xff0c;它通过同时测量多种数据类型来精确描绘细胞状态&#xff…

idea的后端环境配置

首先&#xff0c;在你刚打开idea时红色箭头所指的是你进行配置的地方&#xff0c;接下来我把具体步骤说一下 1&#xff0c;直接点击箭头所指的地方就会出现如图界面&#xff0c;然后点击Tomcat server,使其展开点击第一个 第二步取消勾选&#xff0c;第三步选择bin的上一级然后…