CSS 常见选择器

目录

常见CSS选择器类型

伪类选择器分类

链接伪类选择器的LVHA顺序

选择器优先级

实际应用示例


CSS选择器是CSS中用于选择HTML元素并应用样式的关键工具。以下是各种选择器的详细介绍:

常见CSS选择器类型

  1. 通配选择器 (*):选择所有元素
  2. 元素选择器 (div, p, h1等):选择特定类型的HTML元素
  3. ID选择器 (#id):选择具有特定id属性的元素
  4. 类选择器 (.class):选择具有特定class属性的元素
  5. 后代选择器 (div p):选择某个元素内部的所有指定后代元素
  6. 子选择器 (div > p):选择某个元素的直接子元素
  7. 属性选择器 ([attr], [attr="value"]):基于属性选择元素
  8. 伪类选择器 (:hover, :first-child等):选择元素的特定状态
  9. 伪元素选择器 (::before, ::after等):选择元素的特定部分

伪类选择器分类

  • 动态伪类 :如 :hover, :active, :focus
  • 目标伪类 :如 :target
  • 语言伪类 :如 :lang(en)
  • 元素状态伪类 :如 :checked, :disabled
  • 结构伪类 :如 :first-child, :nth-child()
  • 否定伪类 :如 :not(.class)

链接伪类选择器的LVHA顺序

对于<a>标签,有四个重要的伪类选择器,建议按照LVHA顺序书写:

  1. :link - 未访问的链接

  2. :visited - 已访问的链接

  3. :hover - 鼠标悬停时的链接

  4. :active - 鼠标点击激活时的链接

    a:link {
    color: blue;
    }

    a:visited {
    color: purple;
    }

    a:hover {
    color: red;
    }

    a:active {
    color: orange;
    }

选择器优先级

CSS选择器的优先级从高到低为:

  1. 内联样式 (1000)
  2. ID选择器 (100)
  3. 类选择器、属性选择器、伪类 (10)
  4. 元素选择器、伪元素 (1)

实际应用示例

复制代码
/* 通配选择器 */
* {
  margin: 0;
  padding: 0;
}

/* 元素选择器 */
h1 {
  font-size: 2em;
}

/* 类选择器 */
.highlight {
  background-color: yellow;
}

/* ID选择器 */
#main-header {
  color: blue;
}

/* 后代选择器 */
.nav ul li {
  display: inline-block;
}

/* 子选择器 */
.container > p {
  margin-bottom: 1em;
}

/* 属性选择器 */
input[type="text"] {
  border: 1px solid #ccc;
}

/* 伪类选择器 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 伪元素选择器 */
.quote::before {
  content: """;
}

掌握这些选择器的使用方法和优先级规则,能够帮助您更精确地控制网页元素的样式。