CSS中的三个点

在CSS中，经常会看到三个点(...)的使用，这三个点在不同的上下文中会有不同的含义和用法。

属性选择器

在CSS中，属性选择器的语法为[attribute="value"]，表示选择所有具有相应属性和值的元素。而使用三个点表示选择所有具有相应属性和包含该值的元素，如[attribute*="value"]，表示选择所有具有相应属性并且该属性中包含字符串"value"的元素。

/* 选择所有包含"logo"的class的元素 */
[class*="logo"] {
    background-color: #f00;
}

媒体查询

CSS中的媒体查询可以根据视口的宽度、高度、设备像素比等参数来选择应用不同的样式。而使用三个点表示选择范围为该值及以上或以下的视口。

/* 当视口宽度小于等于320px时，应用以下样式 */
@media (max-width: 320px) {
    /* ... */
}

/* 当视口宽度大于等于768px时，应用以下样式 */
@media (min-width: 768px) {
    /* ... */
}

/* 当视口宽度在320px到768px之间时，应用以下样式 */
@media (min-width: 320px) and (max-width: 768px) {
    /* ... */
}

/* 当视口宽度大于等于768px且设备像素比大于等于2时，应用以下样式 */
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
       (min-width: 768px) and (min--moz-device-pixel-ratio: 2),
       (min-width: 768px) and (-o-min-device-pixel-ratio: 2/1),
       (min-width: 768px) and (min-device-pixel-ratio: 2) {
    /* ... */
}

伪类/伪元素

在CSS中，伪类和伪元素是用于选择元素的特殊关键字，它们不是实际存在于DOM中的元素，而是通过CSS来模拟出来的。使用三个点表示选择具有特定状态或位置的元素，如:hover表示选择鼠标悬停的元素，::before表示选择目标元素前插入的内容。

/* 当鼠标悬停在元素上时，改变元素文字颜色 */
a:hover {
    color: #f00;
}

/* 在目标元素前插入内容 */
p::before {
    content: "提示：";
}

以上就是CSS中的三个点的介绍，它们在CSS中的作用十分关键。