HTML无complete伪类，JS结合CSS实现加载效果

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《HTML中没有`complete`伪类，但可以通过CSS的`::after`或`::before`伪元素配合JavaScript实现类似效果。`complete`通常用于JavaScript中的`Image`对象，表示图片加载完成。若需样式设置，建议结合CSS选择器和JavaScript事件处理。》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

::complete伪类用于媒体元素完成加载或播放后应用样式，主要通过外部样式表实现最佳实践，因其支持结构与表现分离、高复用性、缓存优化、便于维护和团队协作，并可结合::playing、::paused等伪类及autoplay、loop等属性精细控制媒体状态，提升用户体验。

在HTML中设置样式，我们主要依赖的是CSS（层叠样式表）。它就像是给网页“穿衣服”的裁缝，决定了内容看起来怎么样。至于::complete伪类，它是一个相对不那么常见的CSS选择器，主要用来针对那些已经“完成”了的媒体元素（比如视频或音频），让它们在播放完毕或加载结束后呈现出特定的样式。

解决方案

在HTML里给元素加样式，大致有三种主流方式，每种都有自己的适用场景和一些我个人觉得需要注意的地方。

首先是内联样式（Inline Styles）。这最直接，直接在HTML标签里用style属性写CSS。比如：

这是一段蓝色文字。

然后是内部样式表（Internal Stylesheets）。这种方式是在HTML文件的标签里放一个

它比内联样式好一点，至少把样式集中起来了，适合样式只应用于单个HTML页面的情况。但如果你的网站有很多页面，每个页面都复制粘贴相同的样式，那也挺麻烦的，而且浏览器每次加载页面都要重新解析这些样式。

最后，也是我最推荐的外部样式表（External Stylesheets）。这是最专业、最推荐的做法，把CSS代码单独放在一个.css文件里，然后用标签在HTML的里引用它。

styles.css文件里就是你的CSS代码。这种方式实现了内容（HTML）和表现（CSS）的彻底分离，代码结构清晰，复用性极强，维护起来也方便得多。

至于::complete伪类，它专门用于媒体元素（和）。当一个媒体元素被浏览器认为“完成”时，这个伪类就会生效。这个“完成”可以指媒体数据已经完全加载完毕，也可以指媒体播放已经到达了末尾。

一个简单的例子：

video::complete {
    border: 2px solid green; /* 当视频加载或播放完成后，边框变成绿色 */
    opacity: 0.8; /* 稍微透明一点 */
}

它能让你在媒体播放生命周期的特定阶段，给用户一些视觉上的反馈。

为什么我们通常推荐使用外部样式表？

我个人觉得，外部样式表是现代Web开发的基石，它带来的好处远不止“方便”这么简单。首先，它实现了结构与表现的彻底分离。想象一下，HTML就像是建筑的骨架，CSS则是它的装修和涂料。把这两者分开，意味着你修改房子的外观时，不需要去动它的承重结构，反之亦然。这让代码更整洁，也更容易理解。

其次，极强的复用性。你写好一套CSS规则，可以应用到网站的每一个页面上。比如你定义了一个按钮的样式，所有页面上的按钮都可以直接使用这个样式，而不需要在每个HTML文件里重复写一遍。这大大减少了代码量，也保证了网站风格的一致性。

再者，缓存机制带来的性能优势。浏览器第一次访问你的网站时，会下载外部CSS文件并缓存起来。下次你访问同一个网站的其他页面，或者再次访问时，浏览器可以直接从缓存中读取CSS，而不需要重新下载。这对于用户体验来说是巨大的提升，页面加载速度会快很多。

而且，团队协作和维护也更高效。在一个团队项目中，前端开发人员可以专注于HTML结构，设计师或专门的CSS开发者则可以专注于样式。当需要修改某个元素的样式时，只需要去对应的CSS文件里改动一处，所有引用了这个样式的页面都会同步更新，这在大型项目中尤其重要，能有效避免“改一处，崩十处”的尴尬。

最后，从某种角度看，它也间接有利于SEO。更快的加载速度、更清晰的代码结构、更好的用户体验，这些都是搜索引擎喜欢看到的。虽然CSS本身不直接影响SEO排名，但它优化了用户体验和网站性能，这些都是重要的间接因素。

::complete 伪类在实际开发中有什么用武之地？

::complete伪类在实际开发中，虽然不像:hover或:active那么常用，但在处理媒体内容时，它能提供一些很酷的视觉反馈。我看到过一些比较巧妙的用法：

一个常见的场景是，当视频播放完毕后，你可能想给用户一个提示，或者改变视频播放器的外观，暗示视频已经结束。比如，你可以让视频播放器在播放完成后显示一个“重新播放”的按钮或者一个“观看下一集”的链接。虽然这些交互通常需要JavaScript来处理，但::complete可以用来改变这些按钮或链接的初始样式，或者在视频完成后，让它们从隐藏状态变为可见状态，配合一些CSS过渡效果，体验会非常流畅。

举个例子，假设你有一个视频播放器，你希望它在播放结束后，背景稍微变暗一点，并且显示一个“已完成”的图标：

video {
    /* 视频播放器默认样式 */
    width: 100%;
    height: auto;
    background-color: black;
    transition: all 0.5s ease-in-out; /* 添加过渡效果 */
}

video::complete {
    /* 视频播放或加载完成后应用的样式 */
    filter: brightness(0.7); /* 亮度降低 */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); /* 添加一个绿色光晕 */
}

/* 结合伪元素来显示图标 */
video::complete::after {
    content: '✅'; /* 显示一个完成的勾 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: white;
    text-shadow: 0 0 5px black;
    opacity: 1; /* 默认隐藏，在complete时显示 */
    pointer-events: none; /* 确保不影响视频点击 */
}

/* 默认隐藏这个伪元素 */
video::after {
    content: '';
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

这个例子展示了如何利用::complete来改变视频容器的视觉效果，甚至通过伪元素添加一个完成标志。当然，实际应用中，你可能还需要JavaScript来控制视频的播放状态，但::complete确实提供了一个纯CSS的切入点来响应媒体的“完成”状态。它尤其适合那些不需要复杂JS交互，只需简单视觉反馈的场景。

除了 ::complete，还有哪些与媒体元素状态相关的伪类或属性？

除了::complete，CSS标准和HTML5的媒体元素还提供了一些其他伪类和属性，能让我们更细致地控制媒体在不同状态下的样式。理解这些，能让你在设计自定义媒体播放器时有更多的可能性。

首先，与播放状态直接相关的有：

• ::playing: 当媒体元素正在播放时，这个伪类会生效。你可以用它来给正在播放的视频或音频一个视觉上的“正在活跃”的提示。比如，正在播放的视频边框发光，或者音频播放器进度条颜色改变。

  video::playing {
      box-shadow: 0 0 10px rgba(0, 123, 255, 0.8); /* 播放时有蓝色光晕 */
  }

• ::paused: 当媒体元素暂停时，这个伪类生效。这对于自定义播放/暂停按钮的样式，或者在暂停时显示一些额外信息（比如“已暂停”的文字）很有用。

  video::paused {
      cursor: pointer; /* 暂停时鼠标变成可点击状态 */
      filter: grayscale(0.2); /* 暂停时稍微去色 */
  }

除了这些伪类，HTML5的和元素自身也带有很多重要的属性，它们虽然不是CSS伪类，但直接影响媒体的初始行为和状态，间接也影响了我们如何用CSS去响应它们：

• autoplay: 媒体加载后自动播放。这会直接影响::playing伪类何时生效。
• loop: 媒体播放结束后是否循环播放。如果设置了loop，那么::complete伪类在每次循环播放完成后都会触发，这需要注意。
• controls: 是否显示浏览器默认的播放控件。如果你想完全自定义播放器样式，通常会移除这个属性，然后用CSS和JavaScript自己构建控件。
• preload: 告诉浏览器如何预加载媒体。例如"none"（不预加载）、"metadata"（只加载元数据，如时长）、"auto"（尽可能多地预加载）。这个属性会影响媒体何时达到“可播放”状态，从而影响::playing等伪类生效的时机。
• muted: 媒体是否静音。这可能会影响用户对播放状态的感知，但通常不直接与CSS伪类挂钩。

理解这些伪类和属性的组合使用，能让你在不依赖复杂JavaScript框架的情况下，对媒体元素的表现层有更强的控制力。当然，更复杂的播放器功能，比如自定义进度条、音量控制等，依然需要JavaScript来处理媒体API。但CSS伪类提供了非常好的起点，让视觉状态的变化能够与媒体的生命周期紧密结合。

好了，本文到此结束，带大家了解了《HTML无complete伪类，JS结合CSS实现加载效果》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！