将选择器转换为 CSS 中的样式答案

【问题标题】：Transform selector to style in CSS将选择器转换为 CSS 中的样式
【发布时间】：2020-02-14 19:03:42
【问题描述】：

当我在控制台上复制选择器时，我得到了这个元素

#feed-body > div > div:nth-child(1) > div.description > span > span.image > img

如果我想用 !important 设置或覆盖 img 的样式，CSS 会是什么？

我试过了

span.image img {width:100% !important}

但不工作（默认是max-width: 84px，我想更改）。

我也尝试了 max-width: 300px !important 但没有结果。

我是在给错误的班级赋予风格还是别的什么？

【问题讨论】：

打开浏览器的调试器来检查那个元素（img），检查你的css规则是否被应用但被其他东西覆盖了。如果它没有被应用，那么很可能你需要重新定义你的选择器。我认为它在某个地方被覆盖了。
但首先我想知道 span.image img 是否是正确的样式类。我对吗？我应该在我的样式中包含 div 吗？
您的选择器没有问题。当img 是span.image 的直接子代时使用span.image > img，您编写它的方式也应该有效，但很可能会被覆盖。
没有覆盖，因为当我取消选中控制台图像中的 max-width 84px 时，会变为 100%。所以我的样式有效，但不能覆盖现有的
你能发布CSS 类（或类，例如div.description > span > span.image > img, div.myotherclass img,...），如在编写84px 的调试器中看到的那样吗？使用相同的选择器覆盖它。

标签： html css

【解决方案1】：

尝试检查您的页面并在“样式”部分查看是否有其他规则覆盖了此规则。

另外，max-width 可能会限制您的 width 规则，因此您可能需要覆盖两者：

width: 100% !important; max-width: initial !important;

【讨论】：

恐怕我给错误的班级提供了风格，因为当我将您的建议（甚至我的建议）应用到 span.image img 时，我在控制台中根本看不到任何结果。我应该在我的样式中包含 div 吗？并且没有覆盖，因为当我取消选中最大宽度 84px 图像时，图像变为 100%。所以我的样式有效，但不能覆盖现有的。
我的意思是当我取消选中控制台时。对不起
max-width 84px 有一个!important?您可以定义比原始选择器更具体的选择器，以确保您的样式是首选样式（例如，在您需要覆盖样式的元素中使用 ID）
max-width 84px 没有 !important 我尝试了我看到的唯一 ID #feed-body 但不工作
您能否发布该元素的样式检查窗口的捕获，以便更好地查看？