WordPress站点如何编写CSS选择器批量选中同范围图片设置圆角

核心思路 #

完全没必要硬抄浏览器自动生成的超长链式nth-child选择器，这类选择器容错性极差，只要页面结构新增/删除一个空div就会直接失效。你只要找到这一整组图片共同的最近上层父容器，用父容器锚定范围的方式写选择器，就能一次性选中所有目标图片。

可直接落地的操作步骤 #

1. 顺着现有两个单图选择器往上回溯DOM结构，找到同时包含这组第一张图、最后一张图的最近固定容器。一般这类容器都会带WordPress主题或页面生成器输出的固定类名，比如.entry-content、.fusion-builder-row、.post-content这类，不会带nth-child的临时定位参数。
2. 确定好父容器的选择器后，直接套用下面的通用样式代码，就能覆盖组内所有图片：

   /* 把下面的选择器替换成你实际查到的父容器类名 */
   .目标父容器选择器 img {
     border-radius: 8px; /* 可根据设计需求调整圆角数值 */
     display: block; /* 消除inline图片默认的下方空隙，避免圆角显示不全 */
   }
   

兜底方案（找不到精准父容器时用） #

如果怕选范围太大，把页面其他位置的图片也带上圆角，就直接把组内所有图片所在的列容器选择器用逗号拼接成选择器列表，精准划定范围：

/* 对照你之前查到的结构，把组内从第一列到最后一列的列容器都补进选择器列表 */
div.content-box-column:nth-child(2) img,
div.fusion-column:nth-child(3) img,
div.fusion-column:nth-child(4) img,
div.fusion-column:nth-child(5) img,
div.fusion-column:nth-child(6) img,
div.fusion-column:nth-child(7) img {
  border-radius: 8px;
}

注意事项 #

• 写好CSS后如果样式不生效，先检查是不是被主题、插件的原有样式覆盖了，可以适当提高选择器优先级，或者在规则最后加!important临时测试
• 记得清掉网站的缓存插件、浏览器缓存，避免旧CSS缓存导致改动不显示

内容的提问来源于stack exchange，提问作者Dean