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

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规范 :(第6.3.2节.子串匹配属性选择器)

[ATT*= VAL]

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

^{(重点是我的)}

通用选择器:(下面的样式*)

该*选择被称为通用选择,并用它来选择和应用给予样式的所有元素.

来自W3C规格:

通用选择器,写为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'在下面的代码段中选择一个类似的元素.

[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>