七种基本的css选择器

/* 1. 标签选择器 (Element Selector) */
p {
  color: blue;
}
/* 解释：选择所有的 <p> 元素，并将文本颜色设置为蓝色。 */

/* 2. 类选择器 (Class Selector) */
.class-name {
  background-color: yellow;
}
/* 解释：选择所有带有 class="class-name" 的元素，并将背景颜色设置为黄色。 */

/* 3. ID 选择器 (ID Selector) */
#id-name {
  font-size: 20px;
}
/* 解释：选择具有 id="id-name" 的元素，并将字体大小设置为 20 像素。 */

/* 4. 通用选择器 (Universal Selector) */
* {
  margin: 0;
  padding: 0;
}
/* 解释：选择所有元素，并将外边距和内边距都设置为 0。 */

/* 5. 后代选择器 (Descendant Selector) */
div p {
  color: red;
}
/* 解释：选择所有位于 <div> 元素内部的 <p> 元素，并将文本颜色设置为红色。 */

/* 6. 子元素选择器 (Child Selector) */
ul > li {
  list-style-type: none;
}
/* 解释：选择所有直接位于 <ul> 元素内部的 <li> 元素，并移除列表样式。 */

/* 7. 相邻兄弟选择器 (Adjacent Sibling Selector) */
h1 + p {
  font-weight: bold;
}
/* 解释：选择紧跟在 <h1> 元素之后的 <p> 元素，并将字体加粗。 */