Question

我在wordpress中有一个非常混乱的插件css，它的标签来自它的css：

#id_name > div > div {
    width: 5%;
}

使用一些php钩子插入自定义内容后，应该有5％宽度的div已移动，现在这段代码最终压缩了我的代码中的一个div。（如下所示）

<div id="id_name">
    <div>
         <div>
         <div class="col-sm-10 col-md-5 no-padding">
             /*CONTENT SQUASHED BY THE 5% WIDTH*/
         </div>
         <div>
              /*THE ORIGINAL DIV THAT WAS TARGETED BY THE CSS*/
         </div>
         </div> 
</div>

我正在尝试修改它而不编辑插件CSS，但到目前为止我所做的每一次尝试最终都失去了列的响应能力。（自动，100％，继承，初始，未设置......（甚至试过'无'和'还原'，这显然是不合适的......）

有没有办法在不触及插件代码的情况下执行此操作？如果有人提出任何想法，我会很感激！

谢谢！

Answer 1

为什么不直接为您定位的div定义类或ID？我不确定我是否完全理解你要完成的任务，但如果你只是针对

 <div>
     /*THE ORIGINAL DIV THAT WAS TARGETED BY THE CSS*/
 </div>

为什么不写：

 <div id = "id_name">
     /*THE ORIGINAL DIV THAT WAS TARGETED BY THE CSS*/
 </div>

代替？同样在您上传的代码中，您忘记了＆＃34; id_name＆＃34;

的结束引号

Answer 2

使用本地css文件中的以下代码覆盖css

#id_name > div > div {
    width: 100%;
}
#id_name > div > div div:last-child {
    width: 5%;
    float: left
}

Answer 3

您的目标是错误的。

#id_name > div > div {
    width: 5%;
}

上面的选择器定位 的父 div {{1> {{1>} 和 您不希望 div广

的
因此，通过挤压父容器5%只会5%宽 - 相对于祖父容器 - 即使你将其设置为<div class="col-sm-10 col-md-5 no-padding">，因为它的父容器只是允许5%宽

注意：CSS的写入方式表示懒惰。作者应该在width:100%添加5%以防止此类问题。我会注意所说插件的其余代码

除此之外......

定位插件class的“正确”方法是

div

而不是

div

似乎是针对孩子的样式 #id_name > div > div > div或

#id_name > div > div

但已应用于父级 div或

#id_name > div > div > div

由于唯一的修改是div，它可能看起来“正确”或者像是达到了结果。

您的响应能力中断的原因是，当您定位时

#id_name > div > div

就像你的问题一样，你正在改变父母的属性，并可能无意间推动事情。

插件作者是否已使用

width

然后，下面的这个代码段 - 或者选择#id_name > div > div的任何其他变体 - 都可以解决问题。

#id_name > div > div > div

<div class="col-sm-10 col-md-5 no-padding">

删除子主题中的CSS参数而不会失去响应能力

3 个答案:

除此之外......