当前位置：首页 > article >正文

CSS3学习教程，从入门到精通，CSS3 选择器语法知识点及案例代码（3）

article 2025/3/15 7:55:44

CSS3 选择器语法知识点及案例代码

一、基础选择器

1. 元素选择器

根据 HTML 元素的标签名来选择元素。

/* 选择所有的 p 元素 */
p {
  color: red;
}

2. 类选择器

根据 HTML 元素的 class 属性来选择元素。

/* 选择 class 为 "myClass" 的元素 */
.myClass {
  font-size: 16px;
}

3. ID 选择器

根据 HTML 元素的 id 属性来选择元素。

/* 选择 id 为 "myId" 的元素 */
#myId {
  background-color: blue;
}

二、组合选择器

1. 后代选择器

选择作为某个元素后代的元素。

/* 选择 div 元素内部的所有 p 元素 */
div p {
  font-weight: bold;
}

2. 子代选择器

选择作为某个元素直接子代的元素。

/* 选择 div 元素的直接子代 p 元素 */
div > p {
  color: green;
}

3. 相邻兄弟选择器

选择紧接在另一个元素后的元素，且二者具有相同的父元素。

/* 选择紧接在 p 元素后的 span 元素 */
p + span {
  text-decoration: underline;
}

4. 通用兄弟选择器

选择与某个元素具有相同父元素的所有后续兄弟元素。

/* 选择 div 元素内部所有在 p 元素之后的 span 元素 */
p ~ span {
  color: purple;
}

三、属性选择器

1. 基本属性选择器

根据元素的属性名来选择元素。

/* 选择具有 title 属性的元素 */
[title] {
  border: 1px solid black;
}

2. 属性值选择器

根据元素的属性值来选择元素。

/* 选择 type 属性值为 "text" 的元素 */
[type="text"] {
  width: 200px;
}

3. 属性值包含选择器

选择属性值包含指定字符串的元素。

/* 选择 class 属性值包含 "menu" 的元素 */
[class*="menu"] {
  display: inline-block;
}

4. 属性值以特定字符串开头选择器

选择属性值以指定字符串开头的元素。

/* 选择 data-id 属性值以 "item" 开头的元素 */
[data-id^="item"] {
  margin: 5px;
}

5. 属性值以特定字符串结尾选择器

选择属性值以指定字符串结尾的元素。

/* 选择 lang 属性值以 "CN" 结尾的元素 */
[lang$="CN"] {
  padding: 10px;
}

四、伪类选择器

1. 链接伪类

用于选择不同状态的链接。

/* 未访问的链接 */
a:link {
  color: blue;
}

/* 已访问的链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停在链接上 */
a:hover {
  color: red;
}

/* 鼠标点击链接时 */
a:active {
  color: yellow;
}

2. 目标伪类

用于选择当前活动的元素（如被锚点定位的元素）。

/* 被锚点定位的元素 */
:target {
  border: 2px solid green;
}

3. UI 状态伪类

用于选择处于特定状态的 UI 元素（如按钮）。

/* 被禁用的按钮 */
button:disabled {
  opacity: 0.6;
}

/* 被选中的选项 */
option:checked {
  background-color: lightblue;
}

4. 结构伪类

用于选择基于文档结构的元素。

/* 选择父元素的第一个子元素 */
:first-child {
  font-weight: bold;
}

/* 选择父元素的最后一个子元素 */
:last-child {
  color: gray;
}

/* 选择父元素的第 n 个子元素 */
:nth-child(n) {
  background-color: lightgray;
}

/* 选择父元素的第奇数个子元素 */
:nth-child(odd) {
  border: 1px solid black;
}

/* 选择父元素的第偶数个子元素 */
:nth-child(even) {
  padding: 5px;
}

/* 选择父元素的倒数第 n 个子元素 */
:nth-last-child(n) {
  margin: 10px;
}

/* 选择父元素的第 n 个类型元素 */
:nth-of-type(n) {
  font-style: italic;
}

/* 选择父元素的倒数第 n 个类型元素 */
:nth-last-of-type(n) {
  text-transform: uppercase;
}

/* 选择父元素中不是第一个子元素的元素 */
:not(:first-child) {
  color: brown;
}

/* 选择父元素中只有该类型的元素 */
:only-of-type {
  border: 2px solid red;
}

/* 选择父元素中只有该类型的元素 */
:only-child {
  font-size: 20px;
}

/* 选择父元素中空的元素（没有子元素） */
:empty {
  height: 100px;
  background-color: lightgray;
}

五、伪元素选择器

1. 首字母伪元素

用于选择文本的首字母。

/* 选择 p 元素的首字母 */
p::first-letter {
  font-size: 24px;
  font-weight: bold;
}

2. 首行伪元素

用于选择文本的首行。

/* 选择 p 元素的首行 */
p::first-line {
  color: green;
  text-transform: uppercase;
}

3. 插入内容伪元素

用于在元素的开头或结尾插入内容。

/* 在 p 元素的开头插入内容 */
p::before {
  content: "开始：";
  color: orange;
}

/* 在 p 元素的结尾插入内容 */
p::after {
  content: " 结束";
  color: orange;
}

六、案例代码

案例：复杂的网页布局样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 选择器案例</title>
  <style>
    /* 基础选择器 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
    }

    #header {
      background-color: #f8f8f8;
      padding: 20px;
      text-align: center;
      border-bottom: 2px solid #ddd;
    }

    /* 组合选择器 */
    .container > h1 {
      color: #333;
    }

    .menu > li {
      display: inline-block;
      margin-right: 20px;
    }

    .menu > li + li {
      border-left: 1px solid #ccc;
      padding-left: 20px;
    }

    /* 属性选择器 */
    [data-role="button"] {
      cursor: pointer;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
    }

    [data-role="button"]:hover {
      background-color: #0056b3;
    }

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

    .card:nth-child(even) {
      background-color: #fff;
    }

    .card:not(:first-child) {
      margin-top: 20px;
    }

    /* 伪元素选择器 */
    .card::before {
      content: "卡片：";
      display: block;
      font-weight: bold;
      color: #666;
    }

    /* 复杂选择器组合 */
    .card > .card-header {
      background-color: #007bff;
      color: white;
      padding: 15px;
      border-radius: 5px 5px 0 0;
    }

    .card > .card-body {
      padding: 20px;
    }

    .card > .card-footer {
      background-color: #f8f8f8;
      padding: 10px;
      border-top: 1px solid #ddd;
      border-radius: 0 0 5px 5px;
    }

    .card > .card-footer > p:last-child {
      margin-bottom: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <div id="header">
      <h1>欢迎来到我的网站</h1>
    </div>

    <ul class="menu">
      <li><a href="#home">首页</a></li>
      <li><a href="#about">关于我们</a></li>
      <li><a href="#services">服务</a></li>
      <li><a href="#contact">联系我们</a></li>
    </ul>

    <button data-role="button">点击我</button>

    <div class="card">
      <div class="card-header">卡片标题 1</div>
      <div class="card-body">
        <p>这是一个卡片内容。卡片可以用于展示信息，是现代网页设计中常见的组件。</p>
      </div>
      <div class="card-footer">
        <p>卡片底部信息</p>
      </div>
    </div>

    <div class="card">
      <div class="card-header">卡片标题 2</div>
      <div class="card-body">
        <p>这是另一个卡片内容。通过 CSS3 选择器，我们可以轻松地为卡片添加样式，使其看起来更加美观。</p>
      </div>
      <div class="card-footer">
        <p>卡片底部信息</p>
      </div>
    </div>
  </div>
</body>
</html>

案例代码说明

基础选择器：使用了 body、.container、#header 等选择器来设置整体布局和样式。
组合选择器：通过 .container > h1、.menu > li 等选择器来设置导航菜单的样式。
属性选择器：使用 [data-role="button"] 来选择自定义属性的按钮，并为其添加样式。
伪类选择器：使用 .card:nth-child(odd)、.card:not(:first-child) 等选择器来设置卡片的交替背景色和间距。
伪元素选择器：使用 .card::before 在卡片前插入内容。
复杂选择器组合：通过 .card > .card-header、.card > .card-body 等选择器来设置卡片内部不同部分的样式。

这个案例综合运用了多种 CSS3 选择器，展示了如何通过选择器来实现复杂的网页布局和样式设计。

以下是 CSS3 选择器在实际开发中的具体案例：

属性选择器

案例：根据 class 属性前缀选择元素

场景：在项目中，可能需要为具有特定前缀 class 的元素设置统一的样式，比如为所有以 “my” 开头的 class 添加圆形样式。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性前缀选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div[class^=my] {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div style="background-color: rgb(223, 158, 73);">普通</div>
    <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div>
    <div style="background-color: brown;" class="classmyTwoStyle">这是第二个div标签</div>
    <div style="background-color: yellow;" class="classThreeStylemy">这是第三个div标签</div>
    <div style="background-color: rgb(78, 48, 10);" class="mysdasdlassStyle">class属性前缀包含my</div>
</body>
</html>

效果：只有前缀中包含 “my” 的 class 的 div 元素变为圆形。

案例：根据 class 属性后缀选择元素

场景：如果需要为具有特定后缀 class 的元素设置样式，比如后缀为 “my” 的 class。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性后缀选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div[class$=my] {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div style="background-color: rgb(223, 158, 73);">普通</div>
    <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div>
    <div style="background-color: brown;" class="classmyTwoStyle">class属性中包含my</div>
    <div style="background-color: yellow;" class="classThreeStylemy">class属性中后缀包含my</div>
    <div style="background-color: rgb(78, 48, 10);" class="mysdasdlassStyle">class属性前缀包含my</div>
</body>
</html>

效果：只有后缀为 “my” 的 class 的 div 元素变为圆形。

案例：根据 class 属性包含的字符串选择元素

场景：当需要为包含特定字符串的 class 元素设置样式时，比如包含 “my” 的 class。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性值包含选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div[class*=my] {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div style="background-color: rgb(223, 158, 73);">普通</div>
    <div style="background-color: bisque;" class="myClassStyle">class属性前缀包含my</div>
    <div style="background-color: brown;" class="classmyTwoStyle">class属性中包含my</div>
    <div style="background-color: yellow;" class="classThreeStylemy">class属性中后缀包含my</div>
    <div style="background-color: rgb(78, 48, 10);" class="mysdasdlassStyle">class属性前缀包含my</div>
</body>
</html>

效果：所有包含 “my” 的 class 的 div 元素变为圆形。

伪类选择器

案例：选择第一个子元素

场景：在列表或一组元素中，通常需要对第一个元素进行特殊样式设置，比如在导航栏中突出显示第一个菜单项。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first-child选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div:first-child {
            background-color: rgb(238, 138, 6);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div style="background-color: rgb(223, 158, 73);">普通</div>
    <div style="background-color: bisque;">这是第一个div标签</div>
    <div style="background-color: brown;">这是第二个div标签</div>
    <div style="background-color: yellow;">这是第三个div标签</div>
    <div style="background-color: rgb(231, 220, 206);">这是第四个div标签</div>
</body>
</html>

效果：只有第一个 div 元素变为圆形。

案例：选择倒数第二个元素

场景：在需要对元素从后往前进行样式设置时，比如在一组卡片布局中，给倒数第二个卡片添加特殊效果。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-last-child(n)选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }
        div:nth-last-child(2) {
            background-color: rgb(223, 158, 73);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div style="background-color: rgb(223, 158, 73);">普通</div>
    <div style="background-color: bisque;">普通</div>
    <div style="background-color: brown;">普通</div>
    <div style="background-color: yellow;">普通</div>
    <div style="background-color: rgb(78, 48, 10);">普通</div>
</body>
</html>

效果：倒数第二个 div 元素变为圆形。

伪元素选择器

案例：在元素前插入内容

场景：在制作文档或文章时，可能需要在段落前添加引用标记或者装饰性文字。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>before伪元素选择器</title>
    <style>
        .myBefore {
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(0, 0, 0);
            width: 200px;
            height: 200px;
        }
        .myBefore::before {
            content: "这是before伪元素";
            color: rgb(255, 0, 0);
            background-color: rgb(0, 255, 255);
        }
    </style>
</head>
<body>
    <div class="myBefore"></div>
    <div class="myAfter"></div>
</body>
</html>

效果：在 div 元素前插入了指定的文字内容。

案例：在元素后插入内容

场景：在某些情况下，需要在元素后添加补充信息或者装饰性内容，比如在图片后添加版权信息。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>after伪元素选择器</title>
    <style>
        .myAfter {
            background-color: rgb(235, 36, 36);
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: relative;
        }
        .myAfter::after {
            content: "这是after伪元素";
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
    <div class="myAfter"></div>
</body>
</html>