插件窝 干货文章 不同种类的CSS3选择器

不同种类的CSS3选择器

元素 选择 class 处以 249    来源:    2024-10-13

CSS3选择器有多种类型,它们可以根据不同的元素属性、结构关系或状态来选择元素。下面将介绍几种常用的CSS3选择器类型,并提供具体的代码示例。

  1. 基本选择器:
  • 元素选择器:使用元素名称作为选择器,此处以p元素为例:

    p {
      color: red;
    }
  • 类选择器:使用类名作为选择器,以.开头,此处以class为example的元素为例:

    .example {
      font-size: 16px;
    }
  • ID选择器:使用ID作为选择器,以#开头,此处以id为title的元素为例:

    立即学习“前端免费学习笔记(深入)”;

    #title {
      font-weight: bold;
    }
  1. 属性选择器:
  • [attr]:选择具有指定属性的元素,此处以具有data属性的元素为例:

    [data] {
      background-color: yellow;
    }
  • [attr=value]:选择具有指定属性和值的元素,此处以data属性值为example的元素为例:

    [data="example"] {
      color: blue;
    }
  • [attr^=value]:选择具有以指定值开头的属性值的元素,此处以data属性值以"test"开头的元素为例:

    [data^="test"] {
      text-decoration: underline;
    }
  1. 结构性选择器:
  • :nth-child(n):选择父元素的第n个子元素,此处以父元素的第3个子元素为例:

    .parent :nth-child(3) {
      background-color: green;
    }
  • :first-child:选择父元素的第一个子元素,此处以父元素的第一个子元素为例:

    .parent :first-child {
      font-style: italic;
    }
  1. 伪类选择器:
  • :hover:选择鼠标悬停在元素上的状态,此处以元素悬停时改变背景颜色为例:

    .example:hover {
      background-color: orange;
    }
  • :active:选择元素被激活时的状态,此处以元素被点击时改变文字颜色为例:

    .example:active {
      color: purple;
    }

以上是CSS3选择器的部分类型和代码示例,它们可以帮助开发者更灵活地选择和控制页面中的元素样式。通过熟练掌握这些选择器,可以有效提高页面的开发效率和用户体验。