当前位置: 首页 > news >正文

CSS伪元素以及伪类和CSS特性

伪元素:可以理解为假标签

有2个伪元素 (1)::before (2)::after

::before

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">body::before{content: "我是代表伪元素";background-color: red;width: 300px;height: 300px;border: 1px solid blue;}/*body标签样式这个content代表body标签的内容*/</style>
</head>
<body>
<div></div>
</body>
</html>

打开浏览器看效果
在这里插入图片描述
可以看到content就是body的内容,但是设置了宽高无效,可见伪元素是行内元素
总之就是不是不用Html标签做到Html标签的效果就称之为伪元素,把它转换为行内快元素就OK了
假display:inline-block

::after

同样一个意思,在标签内容之后。

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">body::after{content: "我是代表伪元素";background-color: red;width: 300px;height: 300px;border: 1px solid blue;}/*body标签样式这个content代表div标签的内容*/</style>
</head>
<body>
<div>Hello,
</div>
</body>
</html>

打开浏览器显示:
在这里插入图片描述
可以看到content的值在(独占一行)在div内容之后
接下来看这个如果:

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">body::before{content: '\260E';/*icon*/display: inline-block;}/*body标签样式这个content代表div标签的内容*/</style>
</head>
<body>0754-88888888
</body>
</html>

效果
在这里插入图片描述

伪元素依附的同样且多个标签,会把伪元素的内容after或者before所依附的标签内容。

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">body p::before{content: '\260E';		display: inline-block;}/*body标签样式这个content代表div标签的内容*/</style>
</head>
<body><p>1</p><p>2</p><p>3</p>
</body>
</html>

在这里插入图片描述

注意:伪元素必须设置content属性,没设置伪元素不生效
伪元素属于行内元素
伪元素中不能再创建伪元素
一般是将伪元素要依附于某一个标签

CSS特性

(1)层叠性

之前说过,一个标签可以对应多个样式

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.one{color: red;}.two{color: blue;}</style>
</head>
<body>
<div class="one two">猜一下这个文字是什么颜色</div>
</body>
</html>

结果:蓝色
打开浏览器显示:
在这里插入图片描述

所以得出第一个结论:在同一个标签中,如果优先级相同,如果定义的样式发生冲突。那么最最后一次定义样式会将前面定义的样式(冲突的部分)覆盖掉。

(2)继承性(有嵌套关系的标签)

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.one{color:red;}</style>
</head>
<body>
<div class="one"><span>文字</span></div></body>
</html>

浏览器结果
在这里插入图片描述
要改变span标签的 文字颜色,就需要选中span标签,但没有加span标签样式改变了字体颜色。因为嵌套在div中,div是他的父标签,所以:如果子元素默认没有样式,同时该元素又受父元素的影响
再追加样式

<style type="text/css">.one{color:red;font: 20px;text-align: center;}</style>

在这里插入图片描述
可以看到,color,font,text-align属性都可以被子元素继承。

下面有三个点需要注意:

(1)width和height不能被继承

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.one{width: 200px;height: 200px;border: 1px solid red;}</style>
</head>
<body>
<div class="one">我是one<div class="child">我是child</div></div></body>
</html>

浏览器效果
在这里插入图片描述
(2)a标签在默认情况下,不能受父元素的文字颜色影响

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.one{color: red;font-size: 50px;font-weight: 600;font-family: "宋体";}</style>
</head>
<body>
<div class="one"><a href="javascript:void(0)">a标签默认情况下样式文字颜色不收父标签的影响</a>
</div></body>
</html>

浏览器效果
在这里插入图片描述
(3)标题标签在默认情况下,不能直接等于父元素设置的文字大小

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.one{color: red;font-size: 20px;font-weight: 600;font-family: "宋体";}</style>
</head>
<body>
<div class="one"><h1>div中的h1标签</h1>
</div>
<h1>h1标签</h1></body>
</html>

在这里插入图片描述
上面忘了给div设置宽高了,才直观。

(3)优先级

之前说过样式的优先级:内联>内嵌>外部

现在是选择器的优先级:

先比较标签选择器和类选择器

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">p{color: red;}.p1{color: green;}</style>
</head>
<body>
<p class="p1">Haydey</p>
</body>
</html>

在这里插入图片描述
类选择器与ID选择器:

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">p{color: red;}.p1{color: green;}#p2{color: blue;}</style>
</head>
<body>
<p class="p1" id="p2">Haydey</p></body>
</html>

在这里插入图片描述
ID选择器>类选择器>标签选择器

接下来与行内样式比较

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">p{color: red;}.p1{color: green;}#p2{color: blue;}</style>
</head>
<body>
<p class="p1" id="p2" style="color: yellow">Haydey</p></body>
</html>

在这里插入图片描述
行内样式(内联)>ID选择器>类选择器>标签选择器

最后一个!important

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.p1{color: green !important;}</style>
</head>
<body>
<p class="p1"  style="color: yellow">Haydey</p></body>
</html>

在这里插入图片描述

最后得出结论

!important>行内样式(内联)>ID选择器>类选择器>标签选择器

伪类(也是选择器)

上面::是伪元素
:是伪类
第一个是:link

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">a:link{color: red;text-decoration: none;}</style></head>
<body>
<a href="javascript:void(0)">我是a标签</a>
</body>
</html>

在这里插入图片描述

:link修改a标签的默认样式

:visited

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">a:link{color: red;text-decoration: none;}a:visited{color: green;}</style></head>
<body>
<a href="https://www.baidu.com/" target="blank">我是a标签</a>
</body>
</html>

这个是点击a标签后的样式
一开始是红色,点击后是这样的,
变成了绿色
在这里插入图片描述
再次刷新:还是绿色,可以知道该标签会让浏览器缓存。而且这个标签只能设置与颜色相关的属性。

:hover
下面是京东的导航,当条鼠标移动红色箭头指向的地方就开始伪类的动作
在这里插入图片描述

看一下前程无忧的:前尘无忧

在这里插入图片描述
看一下代码
在这里插入图片描述
:hover不止用于a标签,不止改变字体颜色,还可以改大小等。。

a:active这个是点击a标签的文字,字体改变的情况,一般用的不多。

:focus 获取焦点:当input标签获取光标焦点的时候的样式,就是鼠标点击的时候
例如: input:focus

在这里插入图片描述

鼠标点击就变蓝色,在移吹来点击空白就变黄色了。

背景

背景颜色
background-color: 设置背景颜色
默认值: transparent (透明色)
背景图片
写法:background-image:url(这里是图片路径);

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">div{height: 400px;width: 400px;border: 1px solid red;background-image:url(pika.jpg);}</style>
</head>
<body>
<div></div>
</body>
</html>

background-repeat: 设置背景图片的平铺方式
repeat | no-repeat | repeat-x| repeat-y
background-position: 设置背景图片位置
注意:
如果该属性设置一个值,那么另一个默认值代表center
如果设置具体数字,那么第一个值代表水平方向,第二值代表垂直方向
可以设置负数,正数代表沿着坐标轴正方向移动,负数沿着反方向移动
属性联写:

background-image:url(pika.jpg) no-repeat 30px 20px;

目标伪类

:target{属性: 值;}
注意:
目标伪类与锚链接配合使用
只有当被锚链接指向该标签的时候才会执行目标伪类中的css代码。
下面实验的代码,直接下拉

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">#a:target{color: red;}</style>
</head>
<body>
<div id="a">sdada</div>
<!--此处省略n行-->
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<div id="">sdada</div>
<a href="#a">dasd</a>
</body>
</html>

点击dsad就跳到id=a的地方,字体颜色变红,在此刷新,字体还是红的,可以说还是有浏览器缓存。

在这里插入图片描述

相关文章:

CSS伪元素以及伪类和CSS特性

伪元素&#xff1a;可以理解为假标签。 有2个伪元素 &#xff08;1&#xff09;::before &#xff08;2&#xff09;::after ::before <!DOCTYPE html> <html> <head><title></title><style type"text/css">body::before{con…...

【论文笔记】Instantaneous Perception of Moving Objects in 3D

原文链接&#xff1a;https://arxiv.org/abs/2405.02781 简介&#xff1a;本文主张自动驾驶中细微运动的瞬时检测和量化与一般的大型运动同等重要。具体来说&#xff0c;由于激光雷达点云缺乏帧间对应关系&#xff0c;静态物体可能看起来在运动&#xff08;称为游泳效应&#x…...

Segugio:一款针对恶意软件的进程执行跟踪与安全分析工具

关于Segugio Segugio是一款功能强大的恶意软件安全分析工具&#xff0c;该工具允许我们轻松分析恶意软件执行的关键步骤&#xff0c;并对其进行跟踪分析和安全审计。 Segugio允许执行和跟踪恶意软件感染过程中的关键步骤&#xff0c;其中包括从点击第一阶段到提取恶意软件的最…...

互联网系统的微观与宏观架构

互联网系统的架构设计&#xff0c;通常会根据项目的体量、业务场景以及技术需求被划分为微观架构&#xff08;Micro-Architecture&#xff09;和宏观架构&#xff08;Macro-Architecture&#xff09;。这两者的概念与职责既独立又相互关联。本文将通过一些系统案例&#xff0c;…...

数据库、数据仓库、数据湖和数据中台有什么区别

很多企业在面对数据存储和管理时不知道如何选择合适的方式&#xff0c;数据库、数据仓库、数据湖和数据中台&#xff0c;这些方式都是什么&#xff1f;有什么样的区别&#xff1f;企业根据其业务类型该选择哪一种&#xff1f;本文就针对这些问题&#xff0c;来探讨下这些方式都…...

vscode配色主题与图标库推荐

vscode配色主题推荐:Andromedavsocde图标库&#xff1a; vscode-icons Andromeda Dark theme with a taste of the universe 仙女座&#xff1a;一套宇宙深空体验的哑暗色主题; 高对比度,色彩饱和; Easy Installation Open the extensions sidebar on Visual Studio CodeSear…...

深度学习模型入门教程:从基础到应用

深度学习模型入门教程&#xff1a;从基础到应用 前言 在人工智能的浪潮中&#xff0c;深度学习作为一种强大的技术&#xff0c;正在各行各业中发挥着越来越重要的作用。从图像识别到自然语言处理&#xff0c;深度学习正在改变我们的生活和工作方式。本文将带您深入了解深度学…...

数据结构 软考

算法具有5个特性 可行性&#xff0c;有限性&#xff0c;确定性&#xff0c;输入, 输出 图: 有向图 Kruskal(克鲁斯卡尔)算法 和 prim(普鲁姆)算法 都是贪心算法 是一种用来在加权连通图中寻找最小生成树的算法,其操作对象是边. 找最小的不形成环 1.哈夫曼树(也叫最优树)…...

colcon构建ros2功能包时,出现exited with code 2报错的解决方案(bug)

背景&#xff1a; 在学习ros2时&#xff0c;跟着别人的示例进行构建&#xff0c;手敲的代码难免有一些语法错误。 问题&#xff1a; 在colcon构建时&#xff0c;并不会直接输出语法报错。而是出现exited with code 2错误&#xff0c;并提示未能生成功能包&#xff0c;就算加入…...

【大模型LLM面试合集】大语言模型架构_位置编码

位置编码 1.位置编码 不同于RNN、CNN等模型&#xff0c;对于Transformer模型来说&#xff0c;位置编码的加入是必不可少的&#xff0c;因为纯粹的Attention模块是无法捕捉输入顺序的&#xff0c;即无法区分不同位置的Token。为此我们大体有两个选择&#xff1a; 想办法将位置…...

FLINK 分流

在Apache Flink中&#xff0c;分流&#xff08;Stream Splitting&#xff09;是指将一条数据流拆分成完全独立的两条或多条流的过程。这通常基于一定的筛选条件&#xff0c;将符合条件的数据拣选出来并放入对应的流中。以下是关于Flink分流的详细解释&#xff1a; 一、分流方式…...

从零开始:构建一个高效的开源管理系统——使用 React 和 Ruoyi-Vue-Plus 的实战指南

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

windows下pycharm社区版2024下载与安装(包含新建第一个工程)

windows下pycharm社区版2024下载与安装 下载pycharm pycharm官网 安装pycharm 1.进入官网 pycharm官网 下载 点击Download–>右侧Other versions 下载对应的社区版&#xff08;如下图&#xff09;&#xff1a;下载网址 2.点击运行下载好的安装包 点击下一步 3.更改pychar…...

重构案例:将纯HTML/JS项目迁移到Webpack

我们已经了解了许多关于 Webpack 的知识&#xff0c;但要完全熟练掌握它并非易事。一个很好的学习方法是通过实际项目练习。当我们对 Webpack 的配置有了足够的理解后&#xff0c;就可以尝试重构一些项目。本次我选择了一个纯HTML/JS的PC项目进行重构&#xff0c;项目位于 GitH…...

表格编辑demo

<el-form :model"form" :rules"status ? rules : {}" ref"form" class"form-container" :inline"true"><el-table :data"tableData"><el-table-column label"计算公式"><templat…...

企业自建邮件系统选U-Mail ,功能强大、安全稳定

在现代企业运营中&#xff0c;电子邮件扮演着至关重要的角色&#xff0c;随着企业规模的增长和业务的多样化&#xff0c;传统的租用第三方企业邮箱服务逐渐显现出其局限性。例如&#xff0c;存储空间受限、数据安全风险、缺乏灵活的管理和备份功能&#xff0c;以及无法与其他企…...

蓝桥杯题目理解

1. 一维差分 1.1. 小蓝的操作 1.1.1. 题目解析&#xff1a; 这道题提到了对于“区间”进行操作&#xff0c;而差分数列就是对于区间进行操作的好方法。 观察差分数列&#xff1a; 给定数列&#xff1a;1 3 5 2 7 1 差分数列&#xff1a;1 2 2 -3 5 6 题目要求把原数组全部…...

浪潮云启操作系统(InLinux)bcache缓存实践:理解OpenStack环境下虚拟机卷、Ceph OSD、bcache设备之间的映射关系

前言 在OpenStack平台上&#xff0c;采用bcache加速ceph分布式存储的方案被广泛用于企业和云环境。一方面&#xff0c;Ceph作为分布式存储系统&#xff0c;与虚拟机存储卷紧密结合&#xff0c;可以提供高可用和高性能的存储服务。另一方面&#xff0c;bcache作为混合存储方案&…...

通过ssh端口反向通道建立并实现linux系统的xrdp以及web访问

Content 1 问题描述2 原因分析3 解决办法3.1 安装x11以及gnome桌面环境查看是否安装x11否则使用下面指令安装x11组件查看是否安装gnome否则使用下面指令安装gnome桌面环境 3.2 安装xrdp使用下面指令安装xrdp&#xff08;如果安装了则跳过&#xff09;启动xrdp服务 3.3 远程服务…...

# 渗透测试#安全见闻8 量子物理面临的安全挑战

# 渗透测试#安全见闻8 量子物理面临的安全挑战 ##B站陇羽Sec## 量子计算原理与技术 量子计算是一种基于量子力学原理的计算方式&#xff0c;它利用量子位&#xff08;qubits&#xff09;来进行信息处理和计算…...

【rabbitmq】实现问答消息消费示例

目录 1. 说明2. 截图2.1 接口调用截图2.2 项目结构截图 3. 代码示例 1. 说明 1.实现的是一个简单的sse接口&#xff0c;单向的长连接&#xff0c;后端可以向前端不断输出数据。2.通过调用sse接口&#xff0c;触发rabbitmq向队列塞消息&#xff0c;向前端返回一个sseEmitter对象…...

单片机_RTOS__架构概念

经典单片机程序 void main() {while(1){函数1&#xff08;&#xff09;&#xff1b;函数2&#xff08;&#xff09;&#xff1b;}} 有无RTOS区别 裸机 RTOS RTOS程序 喂饭&#xff08;&#xff09; {while&#xff08;1&#xff09;{喂一口饭&#xff08;&#xff09;;} } …...

ClickHouse在百度MEG数据中台的落地和优化

导读 百度MEG上一代大数据产品存在平台分散、质量不均和易用性差等问题&#xff0c;导致开发效率低下、学习成本高&#xff0c;业务需求响应迟缓。为了解决这些问题&#xff0c;百度MEG内部开发了图灵3.0生态系统&#xff0c;包括Turing Data Engine(TDE)计算引擎、Turing Dat…...

B/S架构(Browser/Server)与C/S架构(Client/Server)

基本概念 B/S架构&#xff08;Browser/Server&#xff09;&#xff1a;即浏览器/服务器架构。在这种架构中&#xff0c;用户通过浏览器&#xff08;如Chrome、Firefox、Safari等&#xff09;访问服务器上的应用程序。服务器端负责处理业务逻辑、存储数据等核心功能&#xff0c;…...

idea中自定义注释模板语法

文章目录 idea 自定义模板语法1.自定义模板语法是什么&#xff1f;2.如何在idea中设置呢&#xff1f; idea 自定义模板语法 1.自定义模板语法是什么&#xff1f; 打开我的idea&#xff0c;创建一个测试类&#xff1a; 这里看到我的 test 测试类里面会有注释&#xff0c;这是怎…...

基于SSM的儿童教育网站【附源码】

基于SpringBoot的课程作业管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2 系统模块设计 4.3.3 数据库表设计 5 系统实现 5.1 管理员功能模块的实现 5.1.1 视频列表 5.1.2 文章信息管理 5.1.3 文章类…...

深挖自闭症病因与孩子表现的关联

自闭症&#xff0c;亦称为孤独症&#xff0c;乃是一种对儿童发展有着严重影响的神经发育障碍性疾病。深入探寻自闭症的病因与孩子表现之间的联系&#xff0c;对于更深刻地理解并助力自闭症儿童而言&#xff0c;可谓至关重要。 当前&#xff0c;自闭症的病因尚未完全明晰&#x…...

[网络协议篇] UDP协议

文章目录 1. 简介2. 特点3. UDP数据报结构4. 基于UDP的应用层协议5. UDP安全性问题6. 使用udp传输数据的系统就一定不可靠吗&#xff1f;7. 基于UDP的主机探活 python实现 1. 简介 User Datagram Protocol&#xff0c;用户数据报协议&#xff0c;基于IP协议提供面向无连接的网…...

关系型数据库(1)----MySQL(初阶)

目录 1.mysql 2.mysqld 3.mysql架构 1.连接层 2.核心服务层 3.存储引擎层 4.数据存储层 4.SQL分类 5.MySQL操作库 6.MySQL数据类型 1. 数值类型 2. 日期和时间类型 3. 字符串类型 4. 空间类型 5. JSON数据类型 7.MySQL表的约束 1. 主键约束&#xff08;PRIMARY…...

计算机毕业设计Python+大模型租房推荐系统 租房大屏可视化 租房爬虫 hadoop spark 58同城租房爬虫 房源推荐系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 用到的技术: 1. python…...

济南集团网站建设方案/互联网广告优势

Android5.0中向我们介绍了一个全新的控件–CardView&#xff0c;从本质上看&#xff0c;可以将CardView看做是FrameLayout在自身之上添加了圆角和阴影效果。请注意&#xff1a;CardView被包装为一种布局&#xff0c;并且经常在ListView和RecyclerView的Item布局中&#xff0c;作…...

哈尔滨电子网站建设/什么推广平台好

2019独角兽企业重金招聘Python工程师标准>>> 平时开发都是用的JQuery&#xff0c;最近有空学习了一下Dojo&#xff0c;也有了个简单的了解&#xff0c;所以记录一下&#xff1b; DOJO官网地址&#xff1a;dojotoolkit&#xff0c;在官网可以在里面找到快速入门的栗子…...

网络推广品牌营销公司/appstore关键词优化

目录 基础资料 原项目地址 实现功能&#xff1a; 硬件准备 软件版本 固件版本 补充资料 硬件准备 遥控小车车身拼装 2.1 小车车身组装 2.2接线图示 烧录小车源码 待完成 基础资料 ​ 基于Air780E开发板&#xff1a;Air780E文档中心 原项目地址 luatos-airtun: Air…...

用旧电脑做网站/线上推广公司

文章目录一 、运维工程师发展路径二 、系统运维工程师的技能要求三 、web运维技能要求四 、大数据运维工程师五、容器运维工程师七、日志下面简单介绍下&#xff0c;运维重点收集的日志数据有哪些部分以及用途。八 、 ELK 收集分析 统计日志信息一 、运维工程师发展路径 1、按…...

深广纵横设计公司官网/网站seo公司哪家好

本篇紧随上篇&#xff0c;探讨一下OpenGL内置的拾取机制&#xff0c;给出一个完整的拾取部分实现代码&#xff0c;请有心人批评指正。前篇是:[乱弹OpenGL选择-拾取机制(上)] ——ZwqXin.com 前篇主要讲了名字栈机制&#xff0c;这是拾取机制中对拾取结果进行识别的机制&#x…...

国外的专业性网站/如何免费引流推广

图书管理网站的制作详解&#xff08;个人学习django框架的笔记&#xff09; 第01号笔记最终成果图&#xff1a; 当前笔记所完成的网站的功能简介&#xff1a; 1 网页从数据库获得图书名称 2 点击新增按钮后增加一本书&#xff0c;当前名为“流星蝴蝶剑” 3 点击新增后当前页面…...