不同种类的CSS3选择器

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

1. 基本选择器：

• 元素选择器：使用元素名称作为选择器，此处以p元素为例：

  p {
    color: red;
  }

• 类选择器：使用类名作为选择器，以.开头，此处以class为example的元素为例：

  .example {
    font-size: 16px;
  }

• ID选择器：使用ID作为选择器，以#开头，此处以id为title的元素为例：

  立即学习“前端免费学习笔记（深入）”；

  #title {
    font-weight: bold;
  }

2. 属性选择器：

• [attr]：选择具有指定属性的元素，此处以具有data属性的元素为例：

  [data] {
    background-color: yellow;
  }

• [attr=value]：选择具有指定属性和值的元素，此处以data属性值为example的元素为例：

  

  纯CSS实现的卡片切换效果

  这是一款纯 CSS 实现的卡片切换效果，原理是通过单选按钮 radio 选择不同的按钮后，再使用 CSS 选择器选中对应的内容显示。

  下载

  [data="example"] {
    color: blue;
  }

• [attr^=value]：选择具有以指定值开头的属性值的元素，此处以data属性值以"test"开头的元素为例：

  [data^="test"] {
    text-decoration: underline;
  }

3. 结构性选择器：

• :nth-child(n)：选择父元素的第n个子元素，此处以父元素的第3个子元素为例：

  .parent :nth-child(3) {
    background-color: green;
  }

• :first-child：选择父元素的第一个子元素，此处以父元素的第一个子元素为例：

  .parent :first-child {
    font-style: italic;
  }

4. 伪类选择器：

• :hover：选择鼠标悬停在元素上的状态，此处以元素悬停时改变背景颜色为例：

  .example:hover {
    background-color: orange;
  }

• :active：选择元素被激活时的状态，此处以元素被点击时改变文字颜色为例：

  .example:active {
    color: purple;
  }

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