如何使用 CSS 编辑已安装的 WordPress 滑块插件的样式？

Question

我为我的 WordPress 主题安装了一个免费的响应式图像滑块插件，WD 的 Slider，我需要编辑样式。具体可以看到需要编辑类.wds_slideshow_image_wrap_0：

可以看到我需要这个div的宽度跨越其父容器wds_container2_0宽度的100%：

我需要删除应用于.wds_slideshow_image_wrap_0 的max-width: 800px; 样式，因此我尝试将此类的样式复制并粘贴到我的样式表中，并注释掉max-width: 800px;。但正如你所看到的，这没有任何效果。

向上滚动时，在检查器的样式选项卡中，我注意到这些样式的源文件/行位于 (index):101

由于在样式表中执行此操作时无法编辑样式：

#wds_container1_0 
#wds_container2_0 
.wds_slideshow_image_wrap_0 {
background-color: rgba(0, 0, 0, 0.00);
border-width: 0px;
border-style: none;
border-color: #000000;
border-radius: ;
border-collapse: collapse;
display: inline-block;
position: relative;
text-align: center;
width: 100% !important;
/* max-width: 800px; */
box-shadow: ;
overflow: hidden;
z-index: 0;
}

如何访问该索引文件以更改该 div 的宽度以匹配其父容器的宽度？谢谢！

编辑：在 WordPress 中，您在浏览器中看到的 index.php 文件是其他文件的组合 - header.php、footer.php、front-page.php（或 page.php取决于您的设置），也许sidebar.php。因此，您无法在 index.php 中搜索元素 - 该文件与浏览器中呈现的内容不同。

相反，SSH 进入您的服务器并在终端中执行grep 命令来搜索有问题的元素：

https://mediatemple.net/community/products/dv/204403684/connecting-via-ssh-to-your-server

https://www.siteground.com/tutorials/ssh/searching/

Answer 1

您可以通过样式表覆盖样式。通过定位样式所在的自定义容器或使用！important（不建议这样做）

例如，以“#wds_slideshow_image_wrap_0”为目标？你可以使用

body #wds_container2_0 .wds_slideshow_image_wrap_0 {
/**your code**/
max-width: 100%;
}

或

body #wds_container2_0 div.wds_slideshow_image_wrap_0 {
/**your code**/
max-width: 100%;
}

将上面的代码复制到你的样式表