如何使用CSS隐藏select下拉列表中的指定选项（WordPress Dokan场景）

实现逻辑说明 #

WordPress后台会自动给页面加上登录用户的角色标识，只有管理员账号的页面会带有administrator专属标记，我们只要通过CSS让非管理员看不到该选项即可，你自己用管理员账号登录时还能正常看到。

具体操作流程 #

1. 安装后台自定义CSS工具（新手推荐，不用改主题文件）
   • 登录WordPress管理员后台，依次点击「插件」→「添加新插件」
   • 搜索Admin CSS MU，找到后点击「立即安装」，安装完成后点击「启用」
2. 添加隐藏规则
   • 依次点击「外观」→「Admin CSS」，进入CSS编辑页面
   • 把下面的代码完整粘贴到输入框中，点击「保存CSS」即可

   /* 非管理员账号隐藏wc-failed下拉选项 */
   body:not(.administrator) select option[value="wc-failed"] {
       display: none !important;
   }
   

3. 效果验证
   • 你自己用管理员账号登录，下拉列表里的wc-failed选项仍然正常显示
   • 用供应商账号登录供应商后台，该选项已经被隐藏

异常排查（代码不生效时处理） #

如果粘贴后没生效，说明下拉框有专属的类名，你可以右键点击那个下拉列表，选择浏览器的「检查」功能，看弹出的代码里<select>标签的class属性值，比如如果类名是order-status，就把上面代码里的select替换成.order-status再保存即可。

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