请问class与[class=xxx]的区别是什么？两者是否等价？

打野赵怀真

2024-10-25 70 阅读2分钟

"```markdown 在CSS选择器中，.class与[class=xxx]是两个不同的选择器，它们的功能和用法存在显著差异。

1. 选择器定义

.class 是一个类选择器，专门用于选择具有特定类名的元素。这个类名可以是任意定义的，且可以在同一个元素上应用多个类。

例如：
```
<div class=\"example\"></div>
<div class=\"example another-class\"></div>
```
对应的CSS选择器：
```
.example {
    background-color: yellow;
}
```
[class=xxx] 是一个属性选择器，它用于选择具有特定属性值的元素。它的使用更为具体，针对的是元素的class属性。

例如：
```
<div class=\"example\"></div>
<div class=\"example another-class\"></div>
<div class=\"another-class\"></div>
```
对应的CSS选择器：
```
[class=\"example\"] {
    background-color: blue;
}
```

2. 区别

匹配方式：
- .class选择器会匹配所有具有该类名的元素，无论该元素是否有其他类名。
- [class=xxx]选择器仅匹配那些class属性完全等于xxx的元素。如果元素有多个类名，只有当class属性的值完全匹配xxx时才会被选中。
灵活性：
- .class选择器更灵活，适用于大多数情况。可以使用多个类组合来实现复杂的样式。
- [class=xxx]选择器则更严格，适用于需要确保只选择特定类名的场景。

3. 等价性

在某些情况下，这两个选择器可能会产生相似的效果，但它们并不等价。以下是一些示例：

如果有一个元素：
```
<div class=\"example\"></div>
```
使用 .example 选择器：
```
.example {
    color: red;
}
```
使用 [class=\"example\"] 选择器：
```
[class=\"example\"] {
    color: red;
}
```
在这种情况下，两个选择器都能正确选择该元素。
如果有一个元素：
```
<div class=\"example another-class\"></div>
```
使用 .example 选择器依然能选择这个元素，但使用 [class=\"example\"] 选择器则无法选择，因为class属性并不完全等于example。

4. 总结

.class和[class=xxx]在选择器的匹配方式和灵活性上有显著差异，导致它们在不同情况下的应用效果不同。选择合适的选择器可以提高代码的可读性和维护性。