时间戳

首页 > 解决方案 > 为什么YouTube评论区的CSS有两个“line-height”？

css - 为什么YouTube评论区的CSS有两个“line-height”？

问题描述

如果我打开这样的随机 YouTube 视频（https://www.youtube.com/watch?v=Jmel5YySUXU），并在开发人员工具中检查评论的样式，我会看到有两个行高，并且第一个被取消。

在此处输入图像描述

如果我点击“inline:18451”，我会看到如下代码，但我在网页的源代码中找不到它，所以我猜它是动态创建的。我的问题是为什么有两个line-height属性。这有什么意义吗，或者这只是一个错误（程序员忘记了第一个，后来又添加了第二个）？

#content-text.ytd-comment-renderer {
  --yt-endpoint-color: var(--yt-spec-call-to-action);
  --yt-endpoint-hover-color: var(--yt-spec-call-to-action);
  --yt-endpoint-visited-color: var(--yt-spec-call-to-action);
  color: var(--yt-spec-text-primary);
  font-size: var(--ytd-user-comment_-_font-size); font-weight: var(--ytd-user-comment_-_font-weight); line-height: var(--ytd-user-comment_-_line-height); letter-spacing: var(--ytd-user-comment_-_letter-spacing);
  line-height: 2rem;
}

标签： cssyoutube

解决方案

这可能只是一个错字。

后来有人试图解决问题，但没有注意到那里已经有一个line-height属性。

在同一个选择器中使用 CSS 时，最后提及的属性会覆盖之前的任何属性，当然除非他们使用!important.

从经验来看，人们往往会犯错误。

推荐阅读