css伪类选择器

作者：呐爱淡了发布日期:2025-03-30 浏览:52

/* 示例代码：使用伪类选择器 */

/* 1. :hover - 当用户将鼠标悬停在元素上时应用样式 */
a:hover {
    color: red;
}

/* 解释：当用户将鼠标悬停在超链接（<a>标签）上时，文本颜色会变为红色。 */

/* 2. :active - 当元素被激活（例如点击时）时应用样式 */
button:active {
    background-color: blue;
}

/* 解释：当按钮（<button>标签）被点击时，背景颜色会变为蓝色。 */

/* 3. :focus - 当元素获得焦点时应用样式 */
input:focus {
    border: 2px solid green;
}

/* 解释：当输入框（<input>标签）获得焦点时，边框会变为绿色且宽度为2像素。 */

/* 4. :first-child - 选择作为其父元素的第一个子元素的元素 */
p:first-child {
    font-weight: bold;
}

/* 解释：选择作为其父元素的第一个子元素的段落（<p>标签），并将其字体加粗。 */

/* 5. :nth-child(n) - 选择作为其父元素的第n个子元素的元素 */
li:nth-child(2) {
    color: purple;
}

/* 解释：选择作为其父元素的第二个列表项（<li>标签），并将其文本颜色设置为紫色。 */

上一篇：css省略号表示溢出文本

下一篇：css文字垂直居中