css 语法

/* 示例代码：简单的 CSS 语法 */

/* 选择器 { 属性: 值; } */

/* 1. 标签选择器 */
body {
    background-color: #f0f0f0; /* 设置页面背景颜色为浅灰色 */
}

/* 2. 类选择器 */
.class-name {
    color: blue; /* 设置文本颜色为蓝色 */
    font-size: 16px; /* 设置字体大小为16像素 */
}

/* 3. ID 选择器 */
#id-name {
    margin: 10px; /* 设置外边距为10像素 */
    padding: 5px; /* 设置内边距为5像素 */
}

/* 4. 组合选择器 */
div, p, span {
    line-height: 1.5; /* 设置行高为1.5倍 */
}

/* 5. 伪类选择器 */
a:hover {
    text-decoration: underline; /* 当鼠标悬停在链接上时，添加下划线 */
}

/* 6. 伪元素选择器 */
p::first-letter {
    font-size: 2em; /* 设置段落的第一个字母为两倍大小 */
}

/* 7. 属性选择器 */
input[type="text"] {
    border: 1px solid black; /* 设置类型为 "text" 的输入框的边框为1像素黑色实线 */
}

解释说明：

• 标签选择器：直接使用 HTML 标签名作为选择器。
• 类选择器：使用 . 符号加上类名来选择具有特定类的元素。
• ID 选择器：使用 # 符号加上 ID 名来选择具有特定 ID 的元素。
• 组合选择器：可以同时选择多个不同的标签，并应用相同的样式。
• 伪类选择器：用于选择元素的特定状态（如悬停、点击等）。
• 伪元素选择器：用于选择元素的特定部分（如第一个字母、第一行等）。
• 属性选择器：根据元素的属性和属性值进行选择。