如何在CSS中为=“”元素设置样式？

Question

我有：

<label class="filter-label" for="pv[]181">
   ::before
   white
   <span class="count">5</span>
   ::after
</label>

现在我想编辑::在该标签中的元素之后，但它不起作用。我试过了：

.filter-label label[for="pv[]181"]::after
.filter-label label[for=pv[]181]::after
.filter-label[for=pv[]181]::after

如何修改此::after元素？

谢谢。

Answer 1

使用label.filter-label[for="pv[]181"]::after选择器。

你的CSS选择器（.filter-label label[for="pv[]181"]::after）错了。使用您的选择器，它正在使用类label在元素中搜索filter-label元素。

使用我的选择器，这意味着根据需要选择一个label类filter-label和属性值。

 
label.filter-label[for="pv[]181"]::after {
 content : "A";
 color: red;
}
label.filter-label[for="pv[]181"]::before {
 content : "B";
 color: yellow;
}

<label class="filter-label" for="pv[]181">
   
   white
   <span class="count">5</span>
   
</label>

Answer 2

喜欢这个

Fiddle

label[for="pv[]181"]::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: red;
}

label[for="pv[]181"]::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: blue;
}

<label class="filter-label" for="pv[]181">

   <span class="count">5</span>
   
</label>