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

news2024/10/28 2:22:07

伪元素：可以理解为假标签。

有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的地方，字体颜色变红，在此刷新，字体还是红的，可以说还是有浏览器缓存。

在这里插入图片描述

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

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

相关文章

使用Python Pillow库生成九宫格图片

使用Python Pillow库生成九宫格图片

相信很多人看到过九宫格图片&#xff0c;一张完整的大图被分割成九张小图&#xff0c;在朋友圈和微博里一度成为流行。 相比完整的大图&#xff0c;九宫格图文增添了一丝趣味和精致&#xff0c;也显得更有创意。 制作九宫格图片的工具有很多&#xff0c;下文用Python的PIL库来…
阅读更多...
Puppeteer 与浏览器版本兼容性：自动化测试的最佳实践

Puppeteer 与浏览器版本兼容性：自动化测试的最佳实践

Puppeteer 支持的浏览器版本映射&#xff1a;从 v20.0.0 到 v23.6.0 自 Puppeteer v20.0.0 起&#xff0c;这个强大的自动化库开始支持与 Chrome 浏览器的无头模式和有头模式共享相同代码路径&#xff0c;为自动化测试带来了更多便利。从 v23.0.0 开始&#xff0c;Puppeteer 进…
阅读更多...
vue3完整Demo(数据绑定，数据显示，数据修改，数据提交）

vue3完整Demo(数据绑定，数据显示，数据修改，数据提交）

需要引入的的依赖&#xff1a;jquery&#xff08;用于异步请求&#xff09; 一、数据显示的前端页面 条件查询数据并显示&#xff0c;下拉框使用的model双向绑定 二、js代码&#xff08;list页面的数据请求&#xff09; 后端传来的时间数据需要转换可以使用new Intl.DateTim…
阅读更多...
【NOIP提高组】加分二叉树

【NOIP提高组】加分二叉树

【NOIP提高组】加分二叉树 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 设一个n个节点的二叉树tree的中序遍历为&#xff08;l,2,3,…,n&#xff09;&#xff0c;其中数字1,2,3,…,n为节点编号。每个节点都有一个分数&#xff08;均为正整…
阅读更多...
【Java并发编程】信号量Semaphore详解

【Java并发编程】信号量Semaphore详解

一、简介 Semaphore&#xff08;信号量&#xff09;&#xff1a;是用来控制同时访问特定资源的线程数量&#xff0c;它通过协调各个线程&#xff0c;以保证合理的使用公共资源。 Semaphore 一般用于流量的控制&#xff0c;特别是公共资源有限的应用场景。例如数据库的连接&am…
阅读更多...
redis详细教程（2.List教程）

redis详细教程（2.List教程）

List是一种可以存储多个有序字符串的数据类型&#xff0c;其中的元素按照顺序排列&#xff08;可以重复出现&#xff09;&#xff0c;可以通过数字索引来访问列表中的元素&#xff0c;索引可以从左到右或者从右到左。 Redis 列表可以通过两种方式实现&#xff1a;压缩列表&…
阅读更多...
力扣283-- 移动零

力扣283-- 移动零

开始做梦的地方 力扣283 &#xff1a; 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 何解&#xff1f; 1&#xff0c;暴力枚举&#xff1a…
阅读更多...
ElasticSearch备考 -- index rollover

ElasticSearch备考 -- index rollover

一、题目 给索引my-index-000001&#xff0c;创建别名my-index&#xff0c;并设置rollover&#xff0c;满足以下三个条件的 The index was created 7 or more days ago.The index contains 5 or more documents.The index’s largest primary shard is 1GB or larger. 二、思考…
阅读更多...
cmake命令使用

cmake命令使用

有关cmake的入门简介可参见 CMake入门教程_cmake静态test.c编译-CSDN博客 本文是进一步对cmake常用命令做进一步详述 配置项目 cmake_minimum_required 作用 配置cmake最低版本 用法 cmake_minimum_required(VERSION 3.0) project 作用&#xff1a;设置预设变量 PROJEC…
阅读更多...
w002基于Springboot医护人员排班系统

w002基于Springboot医护人员排班系统

&#x1f64a;作者简介&#xff1a;多年一线开发工作经验&#xff0c;原创团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看文章末尾⬇️联系方式获取&#xff0c;记得注明来意哦~&#x1f339;赠送计算机毕业设计600个选题excel文…
阅读更多...
Python数据分析基础

Python数据分析基础

本文介绍了Python在数据分析中的应用&#xff0c;包括数据读取、清洗、处理和分析的基本操作。通过使用Pandas和Numpy库&#xff0c;我们可以高效地处理大量数据&#xff0c;并利用Matplotlib和Seaborn库进行数据可视化。 1. 引言 Python因其简洁的语法和强大的库支持&#x…
阅读更多...
重学SpringBoot3-Spring WebFlux之Reactor事件感知 API

重学SpringBoot3-Spring WebFlux之Reactor事件感知 API

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ Spring WebFlux之Reactor事件感知 API 1. 什么是 doOnXxx 系列 API&#xff1f;2. doOnXxx API 的常用方法2.1 doOnNext()示例&#xff1a;输出&#xff1a; 2.2 doOnErr…
阅读更多...
OCR经典神经网络(三)LayoutLM v2算法原理及其在发票数据集上的应用(NER及RE)

OCR经典神经网络(三)LayoutLM v2算法原理及其在发票数据集上的应用(NER及RE)

OCR经典神经网络(三)LayoutLM v2算法原理及其在发票数据集上的应用(NER及RE) LayoutLM系列模型是微软发布的、文档理解多模态基础模型领域最重要和有代表性的工作&#xff1a; LayoutLM v2&#xff1a;在一个单一的多模态框架中对文本&#xff08;text&#xff09;、布局&…
阅读更多...
OpenAI GPT-o1实现方案记录与梳理

OpenAI GPT-o1实现方案记录与梳理

本篇文章用于记录从各处收集到的o1复现方案的推测以及介绍 目录 Journey Learning - 上海交通大学NYUMBZUAIGAIRCore IdeaKey QuestionsKey TechnologiesTrainingInference A Tutorial on LLM Reasoning: Relevant methods behind ChatGPT o1 - UCL汪军教授Core Idea先导自回归…
阅读更多...
anaconda 创建环境失败 解决指南

anaconda 创建环境失败 解决指南

anaconda 创建环境失败 解决指南 一、问题描述 我在宿舍有一台电脑。由于我经常泡在实验室&#xff0c;所以那台电脑不是经常用&#xff0c;基本吃灰。昨天晚上突然有在那台电脑上使用Camel-AI部署多智能体协同需求&#xff0c;便戳开了电脑&#xff0c;问题也随之而来。 当…
阅读更多...
开源实时数仓的构建

开源实时数仓的构建

设计计思路 基本思路 开源数据平台的设计思路是通过 Flink SQL Batch、StartRocks SQL 、StartRocks物化视图 的能力实现一个离线任务的开发&#xff1b;使用 DolphinScheduler 进行离线工作流编排和调度&#xff1b;通过 Flink CDC 和 Flink SQL 实现流处理能力&#xff0c;进…
阅读更多...
【自然语言处理】BERT模型

【自然语言处理】BERT模型

BERT&#xff1a;Bidirectional Encoder Representations from Transformers BERT 是 Google 于 2018 年提出的 自然语言处理&#xff08;NLP&#xff09;模型&#xff0c;它基于 Transformer 架构的 Encoder 部分。BERT 的出现极大提升了 NLP 任务的性能&#xff0c;如问答系…
阅读更多...
Linux基础知识 - C(自学使用)

Linux基础知识 - C(自学使用)

1.C语言基础知识 参考博客&#xff1a; https://blog.csdn.net/qq_45254369/article/details/126023482?ops_request_misc%257B%2522request%255Fid%2522%253A%252277629891-A0F3-4EFC-B1AC-410093596085%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%…
阅读更多...
【Canvas与图标】六色彩虹圆角六边形图标

【Canvas与图标】六色彩虹圆角六边形图标

【成图】 120*120的png图标 以下是各种大小图&#xff1a; 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>六色彩虹圆角六边形…
阅读更多...
Android简单控件实现简易计算器

Android简单控件实现简易计算器

学了一些Android的简单控件&#xff0c;用这些布局和控件&#xff0c;设计并实现一个简单计算器。 计算器的界面分为两大部分&#xff0c;第一部分是上方的计算表达式&#xff0c;既包括用户的按键输入&#xff0c;也包括计算结果 数字&#xff1b;第二部分是下方的各个按键&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023