1. 首页
  2. 文章资讯

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

16 阅读 0 评论

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

有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特性

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

 发表
评论 返回
顶部