CSS 选择器用于选择文档中要样式化的元素。以下是一些常见的 CSS 选择器及其用法:

1. 元素选择器
p {
  /* 选择所有 <p> 元素 */
}

2. 类选择器
.button {
  /* 选择所有类为 "button" 的元素 */
}

3. ID 选择器
#header {
  /* 选择具有 "header" ID 的元素 */
}

4. 后代选择器
nav ul {
  /* 选择 <nav> 下的所有 <ul> 元素 */
}

5. 子元素选择器
nav > ul {
  /* 选择 <nav> 下的直接子元素为 <ul> 的元素 */
}

6. 通配符选择器
* {
  /* 选择文档中的所有元素 */
}

7. 属性选择器
input[type="text"] {
  /* 选择所有 type 属性为 "text" 的 <input> 元素 */
}

8. 伪类选择器
a:hover {
  /* 鼠标悬停时选择所有 <a> 元素 */
}

li:nth-child(even) {
  /* 选择偶数位置的 <li> 元素 */
}

9. 伪元素选择器
p::first-line {
  /* 选择每个 <p> 元素的第一行 */
}

p::before {
  /* 在每个 <p> 元素前插入内容 */
}

10. 组合选择器
h1, h2, h3 {
  /* 选择所有 <h1>、<h2> 和 <h3> 元素 */
}

这只是 CSS 选择器的一小部分,它们可以按需组合使用,以实现更精确的元素选择。深入了解 CSS 选择器的使用可以帮助你更灵活地控制页面样式。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12584/CSS