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

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

news 2025/7/8 15:57:40

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

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

在这里插入图片描述

有2个伪元素 （1）::before （2）::after

::before

::after

CSS特性

（1）层叠性

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

（2）继承性（有嵌套关系的标签）

（3）优先级

最后得出结论

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

伪类（也是选择器）

背景

目标伪类

相关文章：

有2个伪元素（1）::before （2）::after