WordPress相同Banner元素需单页保留另一页隐藏，自定义CSS冲突求解

1. 获取目标页面的唯一标识 #

WordPress 默认会给每个页面的 <body> 标签添加独有的页面ID类，你可以通过两种方式获取：

• 前台打开目标页面，右键点击「检查」，在元素面板找到 <body> 标签，提取类名中类似 page-id-123 的字段，数字部分就是当前页面的唯一ID
• 后台打开对应页面的编辑界面，浏览器地址栏中 post= 后的数字即为页面ID
  该类仅会在对应页面生效，不会影响其他站点页面

2. 精准匹配要隐藏的Banner元素 #

你需要隐藏的Banner和保留的Banner资源地址不同，可以用CSS属性选择器做精准匹配：
要隐藏的Banner资源地址包含Ju8jH.png，使用[src*="Ju8jH.png"]即可匹配到对应的Banner图片元素。

3. 组合写入自定义CSS #

将页面限制条件和元素匹配条件组合，写入WordPress自定义CSS面板即可：

/* 请将下方的123替换为你自己的目标页面ID数值 */
body.page-id-123 img[src*="Ju8jH.png"] {
    display: none;
}

如果Banner是被 <a> 标签包裹的，也可以匹配 <a> 标签的链接属性：

/* 请将下方的123替换为你自己的目标页面ID数值 */
body.page-id-123 a[href*="Ju8jH.png"] {
    display: none;
}

补充说明 #

• 如果两个Banner使用完全相同的资源地址，你可以通过父容器类加顺序选择器匹配，比如.banner-wrap:nth-child(2)即可匹配到容器内第二个Banner元素
• 代码添加完成后，请清空WordPress站点缓存和浏览器缓存后再验证效果

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