Question

我在http://www.w3schools.com/css/css_rwd_grid.asp

看到了以下代码

他们并没有真正解释看起来像[class*="col-"]的部分以及以*开头的样式

有人能指出我解释这个CSS代码的地方吗？

<style>
   * {
     box-sizing: border-box;
   }

   [class*="col-"] {
        float: left;
        padding: 15px;
        border: 1px solid red;
   }
   .col-1 {width: 8.33%;}
   .col-2 {width: 16.66%;}
   .col-3 {width: 25%;}
 </style>

Answer 1

属性选择器：（带方括号的选择器）

这个 - [class*="col-"]被称为属性选择器。它用于根据属性及其值选择元素。在这种情况下， 会选择其类包含 col-的所有元素。因此，它会将样式应用于.col-1，.col-2，.col-3等。

来自W3C Spec :(第6.3.2节。子串匹配属性选择器）

<强> [ATT * = VAL]

表示具有att属性的元素，其值至少包含子字符串“val”的一个实例。如果“val”是空字符串，则选择器不代表任何内容。

^{（重点是我的）}

通用选择器：（*下的样式）

*选择器被称为通用选择器，用于 选择并将给定样式应用于所有元素 。

来自W3C Spec：

通用选择器，写为CSS限定名[CSS3NAMESPACE]，带有星号（* U + 002A）作为本地名称，表示任何元素类型的限定名称。如果没有为选择器指定默认名称空间，它表示任何名称空间（包括没有名称空间的名称空间）的文档树中的任何单个元素。如果已指定默认命名空间，请参阅下面的通用选择器和命名空间。

在您的代码中，有些样式是所有三个col-*类的列，而width则不同。因此，[class*="col-"]选择具有这三个类别之一的元素，并为其添加通用样式，而单个.col-1，.col-2，。col-3选择器应用{{1特定于每个类。

width

它更像是选择器的正则表达式，但在使用它们时应该小心，因为* { /* select and apply these styles to ALL elements */ box-sizing: border-box; } [class*="col-"] { /* select all elements whose class contains col- */ float: left; padding: 15px; border: 1px solid red; } /* select elements with specific class */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;}还会在下面的代码段中选择[class*="col-"]之类的元素。

class='fevicol-is-an-adhesive'

[class*="col-"] {
  color: red;
}

奇怪的CSS代码，括号和星号

1 个答案: