Javascript 选择css选择器动态设置元素样式：：before

在使用jquery设置样式之前，我使用动态设置元素的样式，使其具有不同的：：。我将一个类（

.special

）添加到元素（

#town icon

）中，该元素应使用新类（

.special

）的样式设置元素的样式。类确实被添加到元素中，但是css选择器必须太弱，因为元素的样式选择使用它已经拥有的相同样式

如何使选择器更强大

这是我的css：

.select .arr 
  background #fff
  bottom 5px
  position absolute
  right 5px
  top 5px
  width 50px
  pointer-events none

.select .arr:before { //the styling it initially has
  content ''
  position absolute
  top 50%
  right 24px
  margin-top -5px
  pointer-events none
  border-top 10px solid brand-colour
  border-left 10px solid transparent
  border-right 10px solid transparent
}

.special:before { //the styling I want to make it have
  content ''
  position absolute
  top 50%
  right 24px
  margin-top -5px
  pointer-events none
  border-top 10px solid transparent
  border-left 10px solid transparent
  border-right 10px solid transparent
}

.select .arr:after 
  content ''
  position absolute
  top 50%
  right 28px
  margin-top -5px
  pointer-events none
  border-top 6px solid #fff
  border-left 6px solid transparent
  border-right 6px solid transparent
<span id="town-icon" class="arr special" style="background: 

只需将ID

#城镇图标

添加到其中，如下所示：

#城镇图标.特殊：：在{/*您的代码*/}之前

您可以测试您的CSS特性

只需向其添加ID

#城镇图标

，如下所示：

#城镇图标.特殊：：在{/*您的代码*/}之前

---

你可以测试你的CSS特性

##城镇图标。特殊：：在

不起作用之前？但是，如果没有HTML，就很难做到具体，它确实有效。我是css选择器的noob lol。谢谢

##城镇图标。特别：：before

不起作用？但是，如果没有HTML，就很难做到具体，它确实有效。我是css选择器的noob哈哈。谢谢

$("#town-icon").addClass('special');
            $("#town-icon").css("background", "url(assets/gifs/ajax-loader.gif) no-repeat");
            $("#town-icon").css("background-size", "100%");