CSS3伪类

Epicurus
56 阅读3分钟

CSS3伪类

CSS3 引入了许多强大的伪类（Pseudo-classes），用于选择元素的特定状态或位置。伪类以冒号（:）开头，可以与其他选择器结合使用，实现更精细的样式控制。以下是常见的 CSS3 伪类及其用法：

1. 状态伪类

1.1 :hover

  • 作用：选择鼠标悬停时的元素。
  • 示例： 
    a:hover {
  color: red;
}

1.2 :active

  • 作用：选择被用户激活（如点击）时的元素。
  • 示例： 
    button:active {
  background-color: blue;
}

1.3 :focus

  • 作用：选择获得焦点的元素（如表单输入框）。
  • 示例： 
    input:focus {
  border-color: green;
}

1.4 :visited

  • 作用：选择已访问的链接。
  • 示例： 
    a:visited {
  color: purple;
}

1.5 :checked

  • 作用：选择被选中的表单元素（如复选框或单选按钮）。
  • 示例： 
    input[type="checkbox"]:checked {
  background-color: yellow;
}

1.6 :disabled 和 :enabled

  • 作用：选择禁用或启用的表单元素。
  • 示例： 
    input:disabled {
  opacity: 0.5;
}
input:enabled {
  border-color: blue;
}

2. 结构伪类

2.1 :first-child 和 :last-child

  • 作用：选择父元素中的第一个或最后一个子元素。
  • 示例： 
    li:first-child {
  font-weight: bold;
}
li:last-child {
  color: red;
}

2.2 :nth-child(n) 和 :nth-last-child(n)

  • 作用：选择父元素中的第 n 个子元素或倒数第 n 个子元素。
  • 示例： 
    li:nth-child(2) {
  color: blue;
}
li:nth-last-child(2) {
  color: green;
}

2.3 :nth-of-type(n) 和 :nth-last-of-type(n)

  • 作用：选择父元素中特定类型的第 n 个子元素或倒数第 n 个子元素。
  • 示例： 
    p:nth-of-type(2) {
  font-size: 20px;
}
p:nth-last-of-type(1) {
  color: orange;
}

2.4 :first-of-type 和 :last-of-type

  • 作用：选择父元素中特定类型的第一个或最后一个子元素。
  • 示例： 
    p:first-of-type {
  font-weight: bold;
}
p:last-of-type {
  color: purple;
}

2.5 :only-child 和 :only-of-type

  • 作用：选择父元素中唯一的子元素或唯一类型的子元素。
  • 示例： 
    div:only-child {
  background-color: yellow;
}
p:only-of-type {
  color: red;
}

3. 表单伪类

3.1 :required 和 :optional

  • 作用：选择必填或可选的表单元素。
  • 示例： 
    input:required {
  border-color: red;
}
input:optional {
  border-color: green;
}

3.2 :valid 和 :invalid

  • 作用：选择验证通过或未通过的表单元素。
  • 示例： 
    input:valid {
  border-color: green;
}
input:invalid {
  border-color: red;
}

3.3 :in-range 和 :out-of-range

  • 作用：选择值在范围内或超出范围的输入框。
  • 示例： 
    input:in-range {
  background-color: lightgreen;
}
input:out-of-range {
  background-color: pink;
}

4. 其他伪类

4.1 :not(selector)

  • 作用：选择不匹配指定选择器的元素。
  • 示例： 
    div:not(.special) {
  background-color: lightgray;
}

4.2 :empty

  • 作用：选择没有子元素的元素。
  • 示例： 
    div:empty {
  display: none;
}

4.3 :target

  • 作用：选择当前活动的锚点目标元素。
  • 示例： 
    :target {
  background-color: yellow;
}

4.4 :root

  • 作用：选择文档的根元素（<html>）。
  • 示例： 
    :root {
  --main-color: blue;
}

5. 伪类组合使用

伪类可以与其他选择器组合使用，实现更复杂的选择逻辑。

  • 示例： 
    /* 选择表格中偶数行的单元格 */
tr:nth-child(even) td {
  background-color: #f2f2f2;
}

/* 选择第一个段落中的第一个字母 */
p:first-of-type::first-letter {
  font-size: 2em;
}

总结

CSS3 伪类为开发者提供了强大的选择能力，可以轻松实现动态样式、表单验证、结构化布局等效果。合理使用伪类可以显著提升代码的可维护性和用户体验！

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝