Question

在这里问，因为我无法通过正确的搜索查询。这是代码示例：

[class*="button_type"].state_2,
[class*="button_type"]:not(.state_2):hover{
    background-color:#fff;
}

此外，:not后缀的用途是什么？

我无法理解为什么它不仅仅是：

.button_type.state_2,
.button_type:hover { etc..}

Answer 1

[class*="button_type"]是CSS class Selector（相当于CSS attribute selector）意味着将选择其类包含至少一个子字符串“ button_type ”的所有元素。

看一下这个例子：

[class*="button_type"] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block
}

<div class="button_type"></div>
<span class="one_button_type"></span>
<article class="button_type_final"></article>

关于:not()，这意味着它将选择除:not()

内的选择器之外的所有内容

看一下这个例子：

[class*="button_type"] {
  background: red;
  width: 50px;
  height: 50px;
  display: inline-block
}
[class*="button_type"]:not(.state_2) {
  border: black solid
}

<div class="button_type state_1"></div>
<span class="one_button_type state_2"></span>
<article class="button_type_final state_3"></article>

[class * =] css类选择器的含义和作用

1 个答案: