Question

鉴于Google+小部件生成以下HTML代码

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

我应该在样式表中声明如何将宽度覆盖为100％

我试过以下

纠正错误

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

和各种组合无济于事。

我尝试的其他选项是

#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;
}

通过阅读一些评论，我认为已经错过了从Google+小部件生成HTML的观点，我只能选择设置像素宽度。我有一个响应式设计的网站，我需要覆盖内联样式以提供百分比宽度。

如果某人真的能够回答一个棘手的问题，我会很感激，而不是投票和投票来结束一个完全合法的问题。

Answer 1

<强>更新

正如@ niels-keurentjes所说：

在某些情况下，内联样式可能会被覆盖，例如与！important属性或用户样式表一样。

<击> style="width: 290px;"是内联样式。

<击>

来自http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm：

内联样式具有最高优先级。这意味着他们要走了无论如何应用。唯一具有更高风格的款式优先级比内联样式是读者应用的用户样式自己。

有关级联的更多信息：http://www.w3.org/TR/CSS2/cascade.html

出于这个原因，你不能用CSS替代它来使用jQuery覆盖它来重置这个宽度：

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

<击>

Answer 2

以下一个：

#widget_bounds{
   width : 100%;
}

最好不要使用!important，因为它会破坏样式表中的自然级联。

P.S。您应该检查拼写。 id的名称为widget_bounds，与您的css定义中的widet_bounds不同。

Answer 3

事实证明我是在正确的轨道上，但是不可能有一个具有响应式设计的Google+小部件，我能得到的最接近的是具有不同大小的视口的固定宽度px值。

对于那些寻求解决方案的人来说，https://plus.google.com/+DustinStout/posts/CxL5k3EBd4x可以找到有关此问题的有趣讨论。

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

3 个答案: