替换元素、非替换元素与content

最新推荐文章于 2022-01-06 14:43:33 发布

原创最新推荐文章于 2022-01-06 14:43:33 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

13 篇文章

订阅专栏

本文深入探讨CSS中的content属性，介绍其在不同浏览器中的表现，并通过实例展示如何利用content属性实现图片替换等动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

巧妙利用content

在 Chrome 器下，所有的都持 content属性，而其他器仅在::before/::after 中才有效。
利用content实现动态效果。


	<style type="text/css">
		/*如果图片原来是有src地的，我们也是可以使用content属性把 图片内容给换的，于是，我们就能实现hover图片成另外一图片的效果*/
		.emoji:hover {
		    content: url(laugh-tear.png);
		}	
		</style>

<body>
	
	<img class="emoji" src="laugh.png">
</body>

实现效果：
鼠标经过前：
在这里插入图片描述
鼠标经过时：

content与替换元素：

替换元素之所以为替换，就是因为其内容可替换，而这个内容就是 margin、border、 padding 和 content 这 4 个子中的 content box，对应的 CSS 属性是 content，所以，从理论层面讲，content 属性定了是替换还是非替换。
理论太虚，我们还是看一些有趣的真实例。在开始之前，我们需要感 Chrome 器，Chrome 器的表现帮助我们更好地理解了替换。什么表现呢？就是在 Chrome 器下，所有的都持 content属性，而其他器仅在::before/::after 中才有持。因此，下面的所有例，请在 Chrome、Safari、Opera 等器下查看。
前面已经证明了，没有src属性的是非替换元素，但是，如果我们此时使用content 属性给生成一图片呢？
使用content 属性给生成一图片：

<style type="text/css">
div>img:first-child:not(src){

			content:url(1.jpg);
		}
		div>img{
			width: 200px;
			height: 150px;
		}
</style>

<body>
<img>
<img src="1.jpg">
</body>

效果：
在这里插入图片描述
第一张是利用content属性生成的图片，第二张是正常img。

所以到底替换元素是什么？与非替换元素有什么区别？分别有什么联系及如何利用它们之间与content的关系？

非替换元素：(X)HTML 的大多数元素是非替换元素，他们将内容直接告诉浏览器，将其显示出来。且元素一般拥有固定的尺寸（宽高或宽高比）。html中像这样的元素有img, input, textarea, select, object，这些都是替换元素，这些元素都没有实际的内容。
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。就像img元素通过src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，却看不到图片的实际内容。重点是属性与标签，有许多选择像<input type="">type可以是button或text等等，不像<p>、<div>、<strong>等等，直接将内容告诉浏览器。
关于与content的关系，非替换元素通过用content使内容可以替换，可以说成是非替换元素变成了替换元素。就像h1 { content: url(logo.png); }。