我在Twitter Bootstrap中看到了这个选择器:
.show-grid [class*="span"] {
background-color: #eee;
text-align: center;
border-radius: 3px;
min-height: 30px;
line-height: 30px;
}
有人知道这种技术叫什么，有什么用吗?
它是一个属性通配符选择器。在您给出的示例中，它查找.show-grid下具有CONTAINS span类的任何子元素。
所以在这个例子中会选择<strong>元素:
<div class="show-grid">
<strong class="span6">Blah blah</strong>
</div>
你也可以搜索“以……开头”
div[class^="something"] { }
这将工作在这样的东西:-
<div class="something-else-class"></div>
'以…结尾'
div[class$="something"] { }
这是可行的
<div class="you-are-something"></div>
良好的引用
CSS3属性选择器:子字符串匹配 你必须记住的30个CSS选择器 W3C CSS3选择器
它选择类名中包含字符串“span”的所有元素。还有^=表示字符串的开始，$=表示字符串的结束。这里有一些CSS选择器的很好的参考。
我只熟悉引导类spanX，其中X是一个整数，但如果有其他以span结束的选择器，它也将符合这些规则。
它只是帮助应用通用的CSS规则。
以下几点:
.show-grid [class*="span"] {
意味着'的所有子元素。show-grid'中包含span这个词的类将获得这些CSS属性。
<div class="show-grid">
<div class="span">.span</div>
<div class="span6">span6</div>
<div class="attention-span">attention</div>
<div class="spanish">spanish</div>
<div class="mariospan">mariospan</div>
<div class="espanol">espanol</div>
<div>
<div class="span">.span</div>
</div>
<p class="span">span</p>
<span class="span">I do GET HIT</span>
<span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>
<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>
除了<span>本身之外，所有元素都被命中。
关于Bootstrap:
span6 : this was Bootstrap 2's scaffolding technique which divided a section into a horizontal grid, based on parts of 12. Thus span6 would have a width of 50%. In the current day implementation of Bootstrap (v.3 and v.4), you now use the .col-* classes (e.g. col-sm-6), which also specifies a media breakpoint to handle responsiveness when the window shrinks below a certain size. Check Bootstrap 4.1 and Bootstrap 3.3.7 for more documentation. I would recommend going with a later Bootstrap nowadays
在我的情况下，由于类名与数字的动态变化，我无法应用类的背景色
Ex:
问题:
body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
解决方案:
body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
background-color: #2196f35c !important;
}
参考:链接
