CSS里面中括号[ ]的使用方法

中括号在CSS中扮演着重要的角色，它们通常用于属性选择器（attribute selectors），用于匹配具有特定属性的 HTML 元素。

1. 基本属性选择器

语法：[attribute]

含义：选择包含指定属性的元素，无论属性的值是什么。

示例：

[title] {
  color: blue;
}

作用：选择所有具有 title 属性的元素，例如：

<div title="example">This is a div.</div>

2. 属性值完全匹配选择器

语法：[attribute="value"]

含义：选择属性值完全等于某个值的元素。

示例：

[type="text"] {
  border: 1px solid red;
}

作用：选择所有 type 属性值为 text 的元素，例如：

<input type="text">

3. 属性值包含子串选择器

语法：[attribute*="value"]

含义：选择属性值中包含指定子字符串的元素。

示例：

[class*="error"] {
  background-color: yellow;
}

作用：选择类名中包含 error 的所有元素，例如：

<div class="form-error"></div>

4. 属性值以特定值开头选择器

语法：[attribute^="value"]

含义：选择属性值以指定字符串开头的元素。

示例：

[href^="https"] {
  color: green;
}

作用：选择所有链接地址以 https 开头的元素，例如：

<a href="https://www.weisay.com">威言威语</a>

5. 属性值以特定值结尾选择器

语法：[attribute$="value"]

含义：选择属性值以指定字符串结尾的元素。

示例：

[src$=".jpg"] {
  border: 2px solid black;
}

作用：选择所有 src 属性值以 .jpg 结尾的元素，例如：

<img src="image.jpg">

6. 属性值以空格分隔的词匹配选择器

语法：[attribute~="value"]

含义：选择属性值中包含指定值（作为独立词）的元素。

示例：

[class~="button"] {
  font-weight: bold;
}

作用：选择类名中包含 button 的元素，例如：

<div class="primary button"></div>

7. 属性值以连字符分隔的开头词匹配选择器

语法：[attribute|="value"]

含义：选择属性值等于指定值或以指定值开头，后跟一个连字符（-）的元素。

示例：

[lang|="en"] {
  direction: ltr;
}

作用：选择 lang 属性值为 en 或以 en- 开头的元素，例如：

<p lang="en-us"></p>

总结

中括号在 CSS 中的作用主要是用来筛选具有特定属性及属性值模式的元素，非常适合在 HTML 中实现更精确的样式控制。通过这些选择器，我们可以根据需要灵活地应用样式。