为什么我无法移除Bootstrap 4下拉按钮上的caret指示符？

问题根因 #

你的CSS选择器层级写错了：

• message-notification-chat-icon-mobile和dropdown-toggle是同时加在同一个按钮上的并列类名，不存在父子嵌套关系。
• 你当前写的选择器.message-notification-chat-icon-mobile .dropdown-toggle::after，匹配的是「message-notification-chat-icon-mobile元素内部的带dropdown-toggle类的后代元素的伪元素」，根本选不到目标按钮本身的默认caret伪元素，所以隐藏样式完全不生效。

修正代码 #

替换成并列类的选择器写法，直接定位按钮本身的伪元素，同时加优先级声明覆盖Bootstrap默认样式：

.message-notification-chat-icon-mobile.dropdown-toggle::after {
  display: none !important;
}

额外提示：你写的按钮元素重复声明了两个id属性，不符合HTML规范，浏览器只会解析第一个id值，第二个会被忽略，建议删掉冗余的重复id属性。

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