day03-CSS核心样式规则

在CSS中，核心的样式规则主要包括选择器、声明和属性。以下是一些示例：

1. 基础选择器：

/* 标签选择器 */
p {
  color: blue;
}
 
/* 类选择器，用于定义一个或多个元素的样式 */
.my-class {
  font-size: 16px;
}
 
/* ID选择器，用于为特定元素指定独一无二的样式 */
#my-id {
  background-color: yellow;
}

2. 层叠选择器：

/* 子选择器，用于选择指定父元素的直接子元素 */
div > p {
  font-weight: bold;
}
 
/* 后代选择器，用于选择指定元素的后代（不仅限于直接子元素） */
div p {
  color: red;
}
 
/* 相邻选择器，用于选择紧随其之后的同级元素 */
h2 + p {
  margin-top: 0;
}
 
/* 通用选择器，用于选择某个父元素下的所有指定子元素 */
div ~ p {
  color: green;
}

3. 属性选择器：

/* 根据属性名选择元素 */
input[type="text"] {
  background-color: lightblue;
}
 
/* 根据属性值选择元素 */
div[class="special"] {
  border: 1px solid black;
}
 
/* 根据属性值的部分字符串匹配选择元素 */
a[href^="https"] {
  color: red;
}
 
/* 根据属性值的开始字符选择元素 */
input[name$="name"] {
  background-color: yellow;
}

4. 伪类选择器：

/* 链接的不同状态 */
a:link {
  color: blue;
}
 
a:visited {
  color: purple;
}
 
a:hover {
  color: red;
}
 
a:active {
  color: green;
}
 
/* 输入框获取焦点时的样式 */
input:focus {
  border: 2px solid blue;
}

这些是CSS中的核心样式规则，可以用来构建基本的样式表。在实际应用中，还可以使用更高级的选择器和属性，例如伪元素、媒体查询等，来创建响应式和复杂的布局。