在CSS3中，属性选择器和背景缩写是两个重要的概念，它们极大地提高了CSS的效率和可维护性。本文将详细探讨这两个主题。
让我们来看看CSS3的属性选择器。属性选择器允许我们根据HTML元素的特定属性来选择和应用样式。这比传统的基于标签名或类选择器更加灵活和精确。属性选择器主要有以下几种形式：
1. `[attr]`：选择具有指定属性`attr`的所有元素。
2. `[attr=value]`：选择`attr`属性值等于`value`的元素。
3. `[attr~=value]`：选择`attr`属性值中包含空格分隔的`value`单词的元素。
4. `[attr|=value]`：选择`attr`属性值以`value`开头，且可能后跟连字符(-)的元素，主要用于语言属性的选取。
5. `[attr^=value]`：选择`attr`属性值以`value`开头的元素。
6. `[attr$=value]`：选择`attr`属性值以`value`结尾的元素。
7. `[attr*=value]`：选择`attr`属性值中包含`value`的元素。
例如，如果我们想为所有`href`属性包含"example.com"的链接应用样式，可以使用`a[href*="example.com"]`选择器。
接下来，我们讨论CSS3中的背景缩写。在CSS中，我们可以使用单一的`background`属性来设置多个背景属性，如颜色、图像、重复方式、定位和混合模式等。背景缩写可以简化代码，提高效率。例如：
```css
background: color image position/repeat/size attachment;
```
- `color`：定义背景颜色，如`#fff`（白色）或`rgb(255, 0, 0)`（红色）。
- `image`：设置背景图像，可以是URL、渐变或颜色函数，如`url("image.jpg")`或`linear-gradient(to right, red, blue)`。
- `position`：定义图像的位置，如`center`、`top left`或`50% 50%`。
- `repeat`：决定图像是否重复，如`no-repeat`、`repeat-x`或`repeat-y`。
- `size`：控制图像的大小，如`cover`（填充整个容器）或`contain`（保持原图比例，最大尺寸填充容器）。
- `attachment`：设置背景图像是否固定或随滚动移动，如`scroll`或`fixed`。
通过组合这些参数，我们可以创建复杂的背景效果。例如：
```css
div {
background: red url("image.jpg") no-repeat center fixed / cover;
}
```
这个例子设置了红色背景，并在中心位置显示一个不重复的背景图片，图片固定且按比例填充整个div。
总结来说，CSS3的属性选择器和背景缩写是提高CSS代码效率和可读性的关键工具。属性选择器提供更精细的选择元素方式，而背景缩写则让背景设置变得更加简洁。熟练掌握这两个特性，可以更好地进行网页设计和开发。
