css selector

/* 示例代码：使用 CSS 选择器选择特定的 HTML 元素 */

/* 1. 标签选择器 */
p {
    color: blue;
}
/* 解释：选择所有 <p> 元素，并将文本颜色设置为蓝色。 */

/* 2. 类选择器 */
.class-name {
    background-color: yellow;
}
/* 解释：选择所有具有 class="class-name" 的元素，并将背景颜色设置为黄色。 */

/* 3. ID 选择器 */
#id-name {
    font-weight: bold;
}
/* 解释：选择具有 id="id-name" 的元素，并将字体加粗。 */

/* 4. 后代选择器 */
div p {
    text-decoration: underline;
}
/* 解释：选择所有位于 <div> 元素内部的 <p> 元素，并给文本添加下划线。 */

/* 5. 子选择器 */
ul > li {
    list-style-type: square;
}
/* 解释：选择所有直接位于 <ul> 元素内的 <li> 元素，并将列表项符号设置为方块。 */

/* 6. 属性选择器 */
input[type="text"] {
    border: 1px solid black;
}
/* 解释：选择所有 type 属性为 "text" 的 <input> 元素，并设置边框样式。 */

/* 7. 伪类选择器 */
a:hover {
    color: red;
}
/* 解释：当鼠标悬停在 <a> 元素上时，将其文本颜色设置为红色。 */