CSS 更改出现在检查器中，但不会在实际 CSS 文件中应用更改并刷新时出现

Posted 2023-03-28

【中文标题】CSS 更改出现在检查器中，但不会在实际 CSS 文件中应用更改并刷新时出现

【英文标题】：CSS changes appear in inspector, but not upon applying changes in actual CSS file and refreshing

【发布时间】：2018-06-11 21:50:33

【问题描述】：

我正在使用 Twitter API 开发一个项目。基本上，输入用户名，它会获取用户的推文并将它们呈现在页面上。它将它们呈现在 Twitter 为嵌入式推文提供的典型卡片中。我正在尝试更改卡片的高度。

通过选择元素并将"height: 600px;" 添加到类".EmbeddedTweet" 中，很容易在检查器中更改卡片的高度，但是，当我在我的CSS 文件中应用相同的更改并保存并刷新页面，更改不会出现。为什么更改会出现在检查器中，但不会在重新加载页面时出现？

我以前没有遇到过这个问题。我是一个较新的开发人员。我怎样才能使更改保持不变？谢谢。

示例代码：（从 Twitter API 发回的渲染推文）

<div class="EmbeddedTweet EmbeddedTweet--edge 
            js-clickToOpenTarget
            tweet-InformationCircle-widgetParent" 
     data-click-to-open-target="https://twitter.com/username/status/947824196909961216" 
     data-iframe-title="Twitter Tweet"
     data-dt-full="%hours12:%minutes %amPm - %day %month %year"
     data-dt-explicit-timestamp="8:37 AM - Jan 1, 2018" 
     data-dt-months="Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec"  
     data-dt-am="AM"         data-dt-pm="PM"   data-dt-now="now" 
     data-dt-s="s"           data-dt-m="m"     data-dt-h="h"
     data-dt-second="second" data-dt-seconds="seconds" 
     data-dt-minute="minute" data-dt-minutes="minutes" 
     data-dt-hour="hour"     data-dt-hours="hours" 
     data-dt-abbr="%number %symbol" 
     data-dt-short="%day %month"   data-dt-long="%day %month %year" 
     data-scribe="page:tweet" 
     id="twitter-widget-0" 
     data-twitter-event-id="0" 
     lang="en">

向该推文添加 CSS 属性：

.EmbeddedTweet 
    height: 600px;

添加!important，以及清除缓存似乎没有任何区别。

【问题讨论】：

试试height: 600px !important;

你能格式化代码使其可读吗？

我以为 !important 也会修复它，但它似乎没有效果。我还编辑了帖子以使其更具可读性。

【参考方案1】：

根据我使用 iframe 的经验，尤其是与 twitter 应用程序/api 相关的 css 可以被完全阻止，不允许对其进行任何更改。您可能需要找到一个更具延展性的选项来嵌入推文？

【讨论】：

我基本上发现 CSS 必须从某个地方被阻止，所以我放弃了。最终，所有推文的高度都不同，当我试图将它们显示在一个内联块中时，它们并没有正确排列。通过使用masonry.js 库，我找到了一种更好的方法来实现我的目标。总之，问题解决了。

【参考方案2】：

您无法使用 CSS 影响 iframe 的内容。

您是否查看过关于自定义 css 的 Twitter for websites 文档部分？

这里还有一个涉及身高问题的常见问题解答； How can I create an Embedded Tweet of a consistent height? 这严格地说：

嵌入式推文要求最小宽度为 220 像素，最多可填充 550 个水平像素。

Twitter 对它们的小部件的外观有些特殊，因此它们可能不允许您过多地摆弄外观。对于布局中的任何类型的更改，您可以尝试以下操作：将对话和卡片参数设置为 false，以将推文显示限制为仅其基本格式。

希望这会有所帮助！

【参考方案3】：

可能你已经尝试过但仍然 1.我会建议你可以检查是否有任何 css 被覆盖？ 2.尽量按照层级给css。

【讨论】：

他们已经尝试过!important，这是一个很好的测试，看看它是否是一个特异性问题。