元素选择器 id选择器 class选择器 为盒子模型（padding、margin、border）添加样式

在Web前端开发中，CSS是用来控制网页样式的语言，其中元素选择器、id选择器和class选择器是用来指定哪些HTML元素将应用特定样式的规则。盒子模型是CSS布局的基础，它定义了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）如何一起工作以影响元素的尺寸和位置。

以下是如何使用这三种选择器为盒子模型的各个部分添加样式的示例：

1. 元素选择器：直接使用HTML元素标签名来指定样式规则。

p {
    padding: 10px; /* 内边距 */
    margin: 20px;  /* 外边距 */
    border: 1px solid black; /* 边框 */
}

以上代码为所有`<p>`（段落）标签添加了10像素的内边距，20像素的外边距以及一个1像素宽的黑色实线边框。

2. id选择器：使用id属性为HTML元素添加一个唯一的标识符，并通过井号（#）来引用这个标识符。

#myBox {
    padding: 15px;
    margin: 10px;
    border: 2px dashed red;
}

如果HTML中有元素`<div id="myBox"></div>`，则上述CSS规则将为这个元素应用指定的样式。

3. class选择器：使用class属性为HTML元素添加一组共享的样式。通过点号（.）来引用class名称。

.boxModel {
    padding: 5px;
    margin: 15px;
    border: 3px groove blue;
}

在HTML中，任何有`class="boxModel"`的元素都将应用这个样式规则。例如，`<div class="boxModel"></div>`会展示出指定的内边距、外边距和边框样式。