[分享]css初级选择器实验报告

这是一篇css初级选择器实验报告。我们在本次实验中学习了css的初级选择器，这些选择器可以用来匹配选择html中的元素。/ 实验代码 / / 选择元素的标签名 / p { color: red; } ...

这是一篇css初级选择器实验报告。我们在本次实验中学习了css的初级选择器，这些选择器可以用来匹配选择html中的元素。

/* 实验代码 */

/* 选择元素的标签名 */
p {
  color: red;
}

/* 选择元素的类名 */
.warning {
  font-weight: bold;
}

/* 选择元素的id */
#header {
  text-align: center;
}

/* 选择元素的属性 */
input[type="text"] {
  border: 1px solid black;
}

/* 选择元素的子元素 */
ul li {
  text-decoration: underline;
} 

在以上代码中，我们使用了标签选择器、类选择器、id选择器、属性选择器和子元素选择器来匹配元素并修改它们的样式。例如，我们使用p标签选择器来将页面内所有的段落文字颜色设定为红色。

同时，我们还可以利用这些选择器来实现css的层叠效果。即，如果一个元素被多个选择器选中，它会按照选择器的权重和顺序来执行样式。例如，如果一个元素既被标签选择器选中，又被类选择器选中，那么类选择器的样式会替代标签选择器的样式。

总之，初级选择器是css中重要的概念，掌握它们可以为我们日后更好地掌握css打下良好的基础。