如何选择与另一个页面具有相同类别的多个图像

Posted

技术标签:

【中文标题】如何选择与另一个页面具有相同类别的多个图像【英文标题】：How to select multiple images with same class as another page 【发布时间】：2021-07-19 21:42:07 【问题描述】：

这是我第一次发帖，希望不要误会。

我正在尝试找到一种方法来选择图像以赋予它们一个半径，并且需要一些帮助来破译我需要使用的 css 选择器。

我为之做这件事的公司正在使用带有插件的 wordpress 网站，我无法进行快速修复，例如更改 php 文件中的类。

我可以通过使用检查元素并复制css选择器来单独选择所有图像。

当我为单个项目执行此操作时，我的 css 看起来像这样

div.content-box-column:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) img

容器中的第一张图片和最后一张的选择器是这样的。

div.fusion-column:nth-child(7) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > img:nth-child(1)

我知道它可能超级简单，但我不知道如何将它作为图像范围内的单个选择器应用

非常感谢任何帮助

Edit: as Requested a sn-p of what rendered html looks like.

Rendered Html

编辑：按要求由 WordPress 呈现的 Html

<div class="fusion-content-boxes content-boxes columns row fusion-columns-3 fusion-columns-total-6 fusion-content-boxes-1 content-boxes-icon-on-top content-left" data-animationoffset="100%" style="margin-top:0px;margin-bottom:60px;"><style type="text/css">.fusion-content-boxes-1 .heading .content-box-heading color:#212934;
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .content-box-heading,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .heading-link .content-box-heading,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .content-box-heading,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .heading-link .content-box-heading,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::after,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover.link-area-box .fusion-read-more::before,
                    .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:after,
                    .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover:before,
                    .fusion-content-boxes-1 .fusion-content-box-hover .fusion-read-more:hover,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::after,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover.link-area-box .fusion-read-more::before,
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .icon .circle-no,
                    .fusion-content-boxes-1 .heading .heading-link:hover .content-box-heading 
                        color: #125f31;
                    
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .icon .circle-no 
                        color: #125f31 !important;
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box.link-area-box-hover .fusion-content-box-button background: #125f31;color: #fff;.fusion-content-boxes-1 .fusion-content-box-hover .link-area-box.link-area-box-hover .fusion-content-box-button .fusion-button-text color: #fff;
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .icon > span 
                        background-color: #125f31 !important;
                    
                    .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .icon > span 
                        border-color: #125f31 !important;
                    </style><div class="fusion-column content-box-column content-box-column content-box-column-1 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-first-in-row"><div class="col content-box-wrapper content-wrapper link-area-box icon-hover-animation-fade" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%"><div class="heading heading-with-icon icon-left"><div aria-hidden="true" class="image"><img src="https://www.nsg.ie/wp-content/uploads/2021/04/Leaner2.jpg"  data-pagespeed-url-hash="163116447" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"  ></div></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p class="sale_boxTwo"><a href="https://www.nsg.ie/product-category/wall-mirrors/">Wall Mirrors</a></p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-2 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover "><div class="col content-box-wrapper content-wrapper link-area-box icon-hover-animation-fade" style="background-color:rgba(96,125,139,0);" data-animationoffset="100%"><div class="heading heading-with-icon icon-left"><div aria-hidden="true" class="image"><img src="https://www.nsg.ie/wp-content/uploads/2021/04/ShelvesrightSize.jpg"  data-pagespeed-url-hash="2246665079" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"  ></div></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p class="sale_boxTwo"><a href="https://www.nsg.ie/product-category/glass-shelves/">Glass Shelves</a></p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-3 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-last-in-row"><div class="col content-box-wrapper content-wrapper link-area-box icon-hover-animation-fade" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%"><div class="heading heading-with-icon icon-left"><div aria-hidden="true" class="image"><img src="https://www.nsg.ie/wp-content/uploads/2021/04/FittingsRightSize.png"  data-pagespeed-url-hash="1918251973" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"  ></div></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p class="sale_boxTwo"><a href="https://www.nsg.ie/product-category/fittings/">Fittings</a></p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-4 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-first-in-row"><div class="col content-box-wrapper content-wrapper link-area-box icon-hover-animation-fade" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%"><div class="heading heading-with-icon icon-left"><div aria-hidden="true" class="image"><img src="https://www.nsg.ie/wp-content/uploads/2016/12/Stove-Glass-Glass-Hearths-300x250.png"  data-pagespeed-url-hash="1873671197" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"  ></div></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p class="sale_boxTwo"><a href="https://www.nsg.ie/product-category/stove-products/">Stove Products</a></p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-5 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover "><div class="col content-box-wrapper content-wrapper link-area-box icon-hover-animation-fade" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%"><div class="heading heading-with-icon icon-left"><div aria-hidden="true" class="image"><img src="https://www.nsg.ie/wp-content/uploads/2020/04/acrylic.jpg"  data-pagespeed-url-hash="3135282522" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"  ></div></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p class="sale_boxTwo"><a href="https://www.nsg.ie/product-category/polycarbonate-sheets/">Polycarbonate</a></p>
</div></div></div><div class="fusion-column content-box-column content-box-column content-box-column-6 col-lg-4 col-md-4 col-sm-4 fusion-content-box-hover content-box-column-last content-box-column-last-in-row"><div class="col content-box-wrapper content-wrapper link-area-box icon-hover-animation-fade" style="background-color:rgba(255,255,255,0);" data-animationoffset="100%"><div class="heading heading-with-icon icon-left"><div aria-hidden="true" class="image"><img src="https://www.nsg.ie/wp-content/uploads/2021/04/SkewedScreen.jpg"  data-pagespeed-url-hash="1973181063" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"  ></div></div><div class="fusion-clearfix"></div><div class="content-container" style="color:#ffffff;">
<p class="sale_boxTwo"><a href="https://www.nsg.ie/product-category/protective-screen/">Protective Screens</a></p>
</div></div></div><style type="text/css">
                        .fusion-content-boxes-1 .fusion-content-box-hover .heading-link:hover .icon i.circle-yes,
                        .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box:hover .heading-link .icon i.circle-yes,
                        .fusion-content-boxes-1 .fusion-content-box-hover .link-area-link-icon-hover .heading .icon i.circle-yes,
                        .fusion-content-boxes-1 .fusion-content-box-hover .link-area-box-hover .heading .icon i.circle-yes 
                            background-color: #125f31 !important;
                            border-color: #125f31 !important;
                        </style><div class="fusion-clearfix"></div></div>

【问题讨论】：

欢迎 :) 我不确定您的问题中正确的选择器是什么，但您可以从 div.fusion-column img 开始，看看是否需要收紧它。 您好，您能给我们看一个呈现的 HTML 的样例吗？我可以从您提供的两个选择器中收集部分内容，但更完整的结构会有所帮助。 请分享 HTML 代码！ 我无权访问渲染 html 的 php 文件，因为它是在外部托管的。如果有帮助，我可以分享呈现的 html 吗？我会用关于我要选择的容器的上述 html 来编辑我的问题。 【参考方案1】：

如果你只是想用 CSS 选择所有 img 标签

img 
  border-radius: 4px;

【讨论】：

我遇到的问题是没有选择所有图像，而是选择了上面的特定范围。第n个孩子（2）-第n个孩子（7）img。关于如何做到这一点的任何想法？

以上是关于如何选择与另一个页面具有相同类别的多个图像的主要内容，如果未能解决你的问题，请参考以下文章

如何对具有相同 <select> 选项的 <input> 求和？

如何将一个选择元素与另一个选择语句相关联

同一页面上具有相同类别的多个光滑滑块？

如何分解数据库中的值并在选择查询中使用它？

如何创建具有选择的多个用户模型？

从每个类别中至少选择一个，但不能超过一个，并且不能与另一列重复