css选择器

/* 示例代码：CSS选择器 */

/* 1. 元素选择器 */
p {
  color: blue;
}

/* 解释：选择所有的 <p> 元素，并将文本颜色设置为蓝色。 */


/* 2. 类选择器 */
.class-name {
  background-color: yellow;
}

/* 解释：选择所有具有 class="class-name" 的元素，并将其背景颜色设置为黄色。 */


/* 3. ID选择器 */
#id-name {
  font-size: 20px;
}

/* 解释：选择具有 id="id-name" 的唯一元素，并将字体大小设置为 20 像素。 */


/* 4. 后代选择器 */
div p {
  color: red;
}

/* 解释：选择作为 <div> 元素后代的所有 <p> 元素，并将文本颜色设置为红色。 */


/* 5. 子元素选择器 */
ul > li {
  list-style-type: square;
}

/* 解释：选择作为 <ul> 元素直接子元素的所有 <li> 元素，并将列表项样式设置为方块。 */


/* 6. 相邻兄弟选择器 */
h1 + p {
  font-weight: bold;
}

/* 解释：选择紧接在 <h1> 元素之后的 <p> 元素，并将字体加粗。 */


/* 7. 通用兄弟选择器 */
h1 ~ p {
  color: green;
}

/* 解释：选择所有位于 <h1> 元素之后的 <p> 元素，并将文本颜色设置为绿色。 */