Question

我使用this stackoverflow answer在使用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:

这是我的jquery：

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

Answer 1

只需将ID #town-icon添加到其中：

#town-icon.special::before { /* your code */ }

您可以测试CSS特异性here

选择一个css选择器来动态设置元素::

1 个答案: