奇怪的 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

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

这 - [class*="col-"] 被称为属性 selector。它用于 select 基于属性及其值的元素。在这种情况下，它 select 是 class 包含 col- 的所有元素。因此，它将样式应用于 .col-1、.col-2、.col-3 等

来自 W3C Spec：（第 6.3.2 节。子串匹配属性 select 或）

[att*=val]

Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.

^{（重点是我的）}

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

*selector称为通用selector，用于select并应用为所有元素指定样式.

来自W3C Spec：

The universal selector, written as a CSS qualified name [CSS3NAMESPACE] with an asterisk (* U+002A) as the local name, represents the qualified name of any element type. It represents any single element in the document tree in any namespace (including those without a namespace) if no default namespace has been specified for selectors. If a default namespace has been specified, see Universal selector and Namespaces below.

在您的代码中，有些样式是所有三个 col-* class 的列，而 width 则不同。因此，[class*="col-"] selects 元素具有这三个 classes 之一，并向它们添加通用样式，而单独的 .col-1、.col-2、.col-3 select 或将 width 应用到每个 class。

* { /* 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%;}

它更像是 selector 的正则表达式，但你在使用它们时应该小心，因为 [class*="col-"] 也会 select 一个元素，其 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>

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

Strange CSS code, Brackets and Asterisk

css

styles

css-selectors