Question

我继承了一些CSS，我在网上到处搜索，以了解一块css表达的内容，如下所示：

 [class*=wrapper] .logo {
                padding-top: 32px !important;
            }

星号和方括号是做什么的？

很难在谷歌上搜索[和* ...如果问题是愚蠢的话，很抱歉。

Answer 1

它选择一个类logo的元素，该元素的祖先在其class属性的某处具有wrapper。例如，请注意，类burgerwrapper也会导致在下面选择元素。

[class*=wrapper] .logo {
  color: #f99;
}

<div class="logo">Not selected</div>

<div class="wrapper">
  <div class="logo">
    Selected
  </div>
</div>

<div class="burgerwrapper">
  <div class="logo">
    Selected
  </div>
</div>

有关属性选择器的一些背景信息，请参阅http://css-tricks.com/attribute-selectors/。

Answer 2

方括号在做什么

属性选择器

CSS 2.1允许作者指定与具有的元素匹配的规则   源文档中定义的某些属性。

Attribute selectors w3

什么是星号

子字符串匹配属性选择器

[att * = val]表示具有att属性值的元素   包含至少一个子字符串“val”的实例。如果“val”是   空字符串然后选择器不代表任何东西。

Substring matching attribute selectors

总结一下你的例子：

[class*=wrapper] .logo {
  color: red;
}

<div class="wrapper">
  <div>not this</div>
  <div class="logo">this</div>
  <div class="logo">this</div>
</div>
<div>
  <div>not this</div>
  <div class="logo">not this</div>
  <div>not this</div>
</div>

选择类.logo的子元素，其父元素具有值wrapper的属性类出现在该属性的某个位置。

什么是css“[class * = my-class] .my-subclass”在做什么？

2 个答案: