我可以在Less中使用带＆符号的css通配符选择器吗？

Question

我使用less获取CSS，并拥有此代码。重要的是我想要降低下雪佛龙glyphicon 4像素：

.glyphicon {
    font-size: 20px;
    padding: 0;
    &.glyphicon-chevron-down {
        top: 4px;
    }
}

我还想降低向上字形，我想使用css通配符选择器。像这样的东西（这段代码不起作用）：

.glyphicon {
    font-size: 20px;
    padding: 0;
    &[class^="glyphicon-chevron-"] {
        top: 4px;
    }
}

我可以这样做吗？

Answer 1

它不起作用，因为我假设，实际的类字符串并非真正以glyphicon-chevron-开头，而是以glyphicon glyphicon-chevron-开头。

我会尝试

.glyphicon {
  font-size: 20px;
  padding: 0;
  color: green;
  &[class^="glyphicon glyphicon-chevron-"] {
    color: red !important;
  }
}

或者，使用通配符，其中[attr*=value]＆＃34;表示属性名称为attr的元素，其值至少包含一次字符串＆＃34; value＆＃34; as substring。＆＃34;

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

.glyphicon {
  font-size: 20px;
  padding: 0;
  color: green;
  &[class*="glyphicon-chevron-"] {
    color: red !important;
  }
}

编辑：这也不需要嵌套，属性选择器就可以了。但我知道您可能因某些原因需要更具体，或者出于某种原因将代码保持在一起。如果您只是改变了类字符串的顺序，那么您的原始代码也会起作用（除了不匹配的大括号外）