伪类+伪元素+属性 选择器

伪类选择器+伪元素选择器+属性选择器

在CSS中，除了常见的基本选择器外，还有一些特殊的选择器用于更精确地选择HTML元素。以下是三种常见的特殊选择器以及它们的用法和示例：

1. 伪类选择器

伪类选择器用于选择元素的特殊状态或行为。它们以冒号:开头，用于为处于特定状态的元素应用样式。

示例：

/* 选择未被访问过的链接 */
a:link {
    color: blue;
}

/* 选择已被访问过的链接 */
a:visited {
    color: purple;
}

/* 选择鼠标悬停在元素上的状态 */
button:hover {
    background-color: lightgray;
}

/* 选择元素被点击的状态 */
button:active {
    background-color: red;
}

/* 选择元素被选中的状态（例如表单中的复选框和单选按钮） */
input:checked {
    border: 2px solid green;
}

2. 伪元素选择器

伪元素选择器用于选择元素的特定部分，如元素的第一个行或第一个字母。它们以两个冒号::开头。

示例：

/* 选择段落中的第一个字母，并设置为大写 */
p::first-letter {
    font-size: 24px;
    text-transform: uppercase;
}

/* 选择段落中的第一行，并设置背景色 */
p::first-line {
    background-color: yellow;
}

/* 选择段落中的最后一个行，并设置样式 */
p::last-line {
    font-style: italic;
}

/* 选择输入框的占位符文本 */
input::placeholder {
    color: gray;
}

3. 属性选择器

属性选择器用于根据元素的属性值选择元素。它们以方括号[]包裹属性名，并可以根据属性值的不同进行选择。

示例：

/* 选择带有title属性的元素 */
img[title] {
    border: 1px solid black;
}

/* 选择title属性值为"example"的元素 */
img[title="example"] {
    border: 2px solid red;
}

/* 选择alt属性值以"cat"开头的元素 */
img[alt^="cat"] {
    width: 100px;
}

/* 选择href属性值包含"google"的链接元素 */
a[href*="google"] {
    color: blue;
}

/* 选择class属性值以"btn"结尾的元素 */
button[class$="btn"] {
    background-color: green;
}