奇怪的 CSS 代码、括号和星号答案

【问题标题】：Strange CSS code, Brackets and Asterisk奇怪的 CSS 代码、括号和星号
【发布时间】：2016-06-07 22:00:02
【问题描述】：

我在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>

【问题讨论】：

标签： css css-selectors styles

【解决方案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 选择器将 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' 的元素，如下面的sn-p。

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

<h3>Items that will be selected</h3>
<div class='col-1'>Column 1</div>
<div class='col-2'>Column 2</div>
<div class='col-3'>Column 3</div>
<div class='fevicol-is-an-adhesive'>Fevicol is an adhesive</div>

<h3>Items that will not be selected</h3>
<div class='cols-1'>Column 1</div>
<div class='col2'>Column 2</div>
<div class='column-3'>Column 3</div>
<div class='fevicol'>Fevicol is an adhesive</div>

【讨论】：