/* 通用选择器：选择所有元素 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 元素选择器：选择所有<h1>元素 */
h1 {
    color: blue; /* 设置标题颜色为蓝色 */
}

/* 类选择器：选择所有class为"intro"的元素 */
.intro {
    font-style: italic; /* 设置字体为斜体 */
}

/* ID选择器：选择id为"container"的元素 */
#container {
    border: 2px solid black; /* 设置边框为黑色实线 */
    padding: 20px; /* 设置内边距 */
}

/* 类选择器：选择所有class为"item"的元素 */
.item {
    color: green; /* 设置字体颜色为绿色 */
}

/* ID选择器：选择id为"special-item"的元素 */
#special-item {
    font-weight: bold; /* 设置字体为加粗 */
    color: red; /* 设置字体颜色为红色 */
}

/* 属性选择器：选择所有具有type="button"属性的<button>元素 */
button[type="button"] {
    background-color: orange; /* 设置背景颜色为橙色 */
    color: white; /* 设置字体颜色为白色 */
    border: none; /* 去掉边框 */
    padding: 10px 20px; /* 设置内边距 */
    cursor: pointer; /* 设置鼠标悬停时的光标样式 */
}

/* 伪类选择器：选择第一个<p>元素 */
#container p:first-of-type {
    font-size: 18px; /* 设置字体大小 */
    color: purple; /* 设置字体颜色为紫色 */
}

/* 伪类选择器：选择所有<li>元素的最后一个子元素 */
ul li:last-child {
    text-decoration: underline; /* 设置下划线 */
}

/* 伪类选择器：鼠标悬停时的样式 */
button:hover {
    background-color: darkorange; /* 鼠标悬停时背景颜色变深 */
}