CSS覆盖由Google+小部件自动生成的内联样式

给定以下由Google+小部件生成的HTML代码

<div id="widget_bounds" class="Yfd" style="width: 290px;">

而且各种组合都是徒劳的

我尝试过的其他选择有

#widget_bounds, #widget_bounds .Yfd, .Yfd[style], #widget_bounds[style] .Yfd, #widget_bounds[style] .Yfd[style]{
    width:100% !important;
}
#widget_bounds .Yfd[style]{
    width:100% !important;
}

#widget_bounds{
    width:100% !important;
}

.Yfd[style]{
    width:100% !important;
}

通过阅读一些评论，我认为没有注意到HTML是从Google+小部件生成的，我只能选择设置像素宽度。我有一个响应设计的网站，我需要覆盖内联风格，以提供百分比宽度

如果有人能够回答一个困难的问题，我将不胜感激，而不是否决投票并投票结束一个完全合法的问题。

以下问题：

#widget_bounds{
   width : 100%;
}

最好不要用！重要原因是它破坏了样式表中的自然级联

另外，你应该检查拼写。id被命名为widget\u bounds，它与css定义中的widet\u bounds不同。

更新

如@niels keurentjes所述：

在一些情况下，内联样式可能会被过度使用，例如 就像那辆车一样！重要属性或用户样式表

样式=宽度：290px；是一种内联样式

发件人：

内联样式具有最高优先级。这意味着他们要走了 无论发生什么都要应用。唯一具有更高性能的样式 读卡器应用的用户样式优先于内联样式 他们自己

有关级联的更多信息：

因此，您不能使用CSS替代方案覆盖它。请使用jQuery重置此宽度：

$('#widget_bounds').ccs('width','100%');

---

事实证明，我的思路是正确的，但不可能有一个具有响应性设计的Google+小部件，最接近的方法是为不同大小的视口提供固定宽度的px值

---

任何想找到解决方案的人都可以在这里找到关于这个问题的有趣讨论。

也许你应该试着正确拼写小部件。@NielsKeurentjes在我的css中拼写正确，我在问题中输入了一个拼写错误，并已更正。你有解决办法吗？问题依然存在！不，你有很宽的界限。检查拼写。DOH！我甚至复印并粘贴了这张照片。打字错误上的好地方。谢谢你纠正了我的问题。对不起，这不是真的！重要的是特朗普没有内联样式。这是它有时有用的主要原因之一。我认为将内联样式与html混合使用不是一个好的做法。它们应该在.css文件中定义，因此id将具有最高优先级。对不起，你错了，我已经看到Facebook Likebox小部件完成了此操作。@Ioan，同意，但我别无选择，HTML来自Google+小部件。@jamesw那又怎样？你不能用一个id覆盖.css文件中的样式吗？

$('#widget_bounds').ccs('width','100%');