CSS基础（后代选择器、子代选择器、兄弟选择器、属性选择器、伪类选择器、伪元素选择器）

编程语言 2025-04-12 00:18
0 阅读

文章目录

视频教程：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频

1. 后代选择器

祖先元素 后代元素 {
    
    
  属性: 值;
  /* 更多样式属性 */
}

2. 子代选择器

子代选择器只选择直接子元素，不包括更深层次的后代

父元素 > 子元素 {
    
    
  属性: 值;
  /* 更多样式属性 */
}

3. 兄弟选择器

3.1 相邻兄弟选择器

相邻兄弟选择器（+）选择的是前一个元素后面紧接着的兄弟元素

前一个元素 + 紧接着的兄弟元素 {
    
    
  属性: 值;
  /* 更多样式属性 */
}

3.2 通用兄弟选择器

通用兄弟选择器（~）选择的是前一个元素后面所有的兄弟元素

前一个元素 ~ 兄弟元素 {
    
    
  属性: 值;
  /* 更多样式属性 */
}

4. 属性选择器

4.1 基于属性存在与否的选择器

选择具有特定属性的元素，不考虑属性的值

[attr] {
    
    
  /* 属性名attr的样式 */
}

4.2 基于特定属性值的选择器

选择具有特定属性值的元素

/* 选择所有具有 "attr" 属性且值为 "value" 的元素 */
[attr="value"] {
    
    
  color: red;
}

/* 选择所有具有 "attr" 属性且值以 "value" 开头的元素 */
[attr^="value"] {
    
    
  color: green;
}

/* 选择所有具有 "attr" 属性且值以 "value" 结尾的元素 */
[attr$="value"] {
    
    
  color: orange;
}

/* 选择所有具有 "attr" 属性且值包含 "value" 的元素 */
[attr*="value"] {
    
    
  color: purple;
}

5. 伪类选择器

5.1 状态伪类（重点掌握）

状态伪类是 CSS 中用于选择具有特定状态的元素的一类选择器。这些伪类基于用户的交互或元素的状态来匹配元素

5.1.1 常见的状态伪类

  • :link - 选择未被访问的链接（<a></a> 标签独有）
  • :visited - 选择已访问的链接（<a></a> 标签独有）
  • :hover - 当鼠标悬停在元素上时
  • :active - 当元素被激活（如鼠标按下）时
  • :focus - 当元素获得焦点时（如输入框被选中）
  • 超链接的伪类选择器需要遵循 :link、:visited、:hover 、 :active 顺序（通常被称为“LVHA”顺序）
  • 如果顺序不正确，后面的规则可能会覆盖前面的规则

5.1.2 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>伪类选择器-状态伪类</title>
</head>
<style>
    /* 选择未被访问的链接，并设置其颜色为蓝色 */
    a:link {
      
      
        color: blue;
    }

    /* 选择已访问的链接，并设置其颜色为绿色 */
    a:visited {
      
      
        color: green;
    }

    /* 当鼠标悬停在链接上时，设置链接颜色为红色 */
    a:hover {
      
      
        color: red;
    }

    /* 当链接被激活（如鼠标按下）时，设置链接颜色为橙色 */
    a:active {
      
      
        color: orange;
    }

    /* 当输入框或选择框获得焦点时，设置其背景颜色 */
    input:focus, select:focus {
      
      
        background-color: #3d9fd8;
    }
</style>

<body>
<div>
  <!-- 链接到百度的超链接 -->
  <a href="https://www.baidu.com">百度</a>
  <!-- 文本输入框 -->
  <label>
    <input type="text" placeholder="">
  </label>

  <!-- 下拉选择框 -->
  <label>
    <select>
      <option value="">请选择</option>
      <option value="ShangHai">上海</option>
      <option value="HangZhou">杭州</option>
    </select>
  </label>
</div>
</body>
</html>

5.2 结构伪类

结构伪类是 CSS 选择器的一种，允许开发者根据文档树中的元素的位置来选择元素，而无需添加额外的类或 ID。结构伪类选择器通常用于选择如列表中的第一个或最后一个元素、奇数或偶数位置的元素等

5.2.1 常见的结构伪类

  1. :first-child
    • 选择每个父元素的第一个子标签
    • 示例：p:first-child 选中每个是第一个子标签的<p>
  2. :last-child
    • 选择每个父元素的最后一个子标签
    • 示例：p:last-child 选中每个是最后一个子标签的<p>
  3. :nth-child(n)
    • 选择每个父元素的第n个子标签
    • 示例：p:nth-child(2) 选中每个第二个子标签的<p>
  4. :nth-last-child(n)
    • 从后往前数，选择每个父元素的第n个子标签
    • 示例：p:nth-last-child(2) 选中每个倒数第二个子标签的<p>
  5. :first-of-type
    • 选择每个父元素中第一个特定类型的子标签
    • 示例：p:first-of-type 选中每个父元素中的第一个<p>
  6. :last-of-type
    • 选择每个父元素中最后一个特定类型的子标签
    • 示例：p:last-of-type 选中每个父元素中的最后一个<p>
  7. :nth-of-type(n)
    • 选择每个父元素中第n个特定类型的子标签
    • 示例：p:nth-of-type(2) 选中每个父元素中的第二个<p>
  8. :nth-last-of-type(n)
    • 从后往前数，选择每个父元素中第n个特定类型的子标签
    • 示例：p:nth-last-of-type(2) 选中每个父元素中的倒数第二个<p>
  9. :only-child
    • 选择只有一个子标签的父元素中的那个子标签
    • 示例：p:only-child 选中只有一个子标签且为<p>的情况
  10. :only-of-type
    • 选择只有一个特定类型子标签的父元素中的那个子标签
    • 示例：p:only-of-type 选中只有一个<p>子标签的情况
  11. :root
    • 选择整个文档的根标签（通常是<html>）
  12. :empty
    • 选择没有任何内容（包括文本）的标签
    • 示例：p:empty 选中没有任何内容的<p>标签

5.2.2 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器-结构伪类</title>
  <style>
      /* 选择每个父元素的第一个子标签<p> */
      p:first-child {
      
      
          color: red;
      }

      /* 选择每个父元素的最后一个子标签<p> */
      p:last-child {
      
      
          color: blue;
      }

      /* 选择每个父元素的第2个子标签<p> */
      p:nth-child(2) {
      
      
          font-weight: bold;
      }

      /* 从后往前数，选择每个父元素的第2个子标签<p> */
      p:nth-last-child(2) {
      
      
          text-decoration: underline;
      }

      /* 选择每个父元素中第一个特定类型的子标签<p> */
      p:first-of-type {
      
      
          font-style: italic;
      }

      /* 选择每个父元素中最后一个特定类型的子标签<p> */
      p:last-of-type {
      
      
          font-size: 18px;
      }

      /* 选择每个父元素中第2个特定类型的子标签<p> */
      p:nth-of-type(2) {
      
      
          background-color: yellow;
      }

      /* 从后往前数，选择每个父元素中第2个特定类型的子标签<p> */
      p:nth-last-of-type(2) {
      
      
          border: 1px solid black;
      }

      /* 选择只有一个子标签的父元素中的那个子标签<p> */
      p:only-child {
      
      
          color: green;
      }

      /* 选择只有一个特定类型子标签的父元素中的那个子标签<p> */
      p:only-of-type {
      
      
          text-align: center;
      }

      /* 选择没有任何内容的标签<p>，并给予边框样式 */
      p:empty {
      
      
          border: 2px dashed #999999; /* 给空<p>标签添加虚线边框 */
          min-height: 20px; /* 设置最小高度，确保边框可见 */
          display: block; /* 确保边框显示为块级元素 */
      }
  </style>
</head>
<body>

<div>
  <p>段落一</p>
  <span>其他内容</span>
  <p>段落二</p>
</div>

<div>
  <p>唯一段落</p>
</div>

<div>
  <p></p> <!-- 空的<p>标签 -->
  <p>段落三</p>
</div>

<div>
  <span>其他内容</span>
  <p>段落四</p>
  <p>段落五</p>
</div>

</body>
</html>

5.3 否定伪类

否定伪类（:not）是CSS中的一个选择器，允许选择不符合一组特定条件的元素。这个伪类通常与其他选择器结合使用，以排除某些不需要的元素，从而提高选择器的精度

示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器-否定伪类</title>
  <style>
      /* 基本样式 */
      body {
      
      
          font-family: Arial, sans-serif;
      }

      .score {
      
      
          margin: 5px;
          padding: 5px;
          border: 1px solid #ddd;
      }

      /* 使用否定伪类为不及格的学生设置样式 */
      .score:not([data-pass="true"]) {
      
      
          background-color: #ffcdd2; /* 红色背景表示不及格 */
          color: #d32f2f; /* 红色文字 */
      }

      /* 为及格的学生设置样式 */
      .score[data-pass="true"] {
      
      
          background-color: #c8e6c9; /* 绿色背景表示及格 */
      }
  </style>
</head>
<body>

<h1>学生考试成绩</h1>
<ul>
  <li class="score" data-pass="true">张三: 85</li>
  <li class="score" data-pass="false">李四: 45</li>
  <li class="score" data-pass="true">王五: 92</li>
  <li class="score" data-pass="false">赵六: 58</li>
  <li class="score" data-pass="true">钱七: 78</li>
</ul>

</body>
</html>

5.4 UI伪类

在CSS中，UI（用户界面）伪类是一组专门用于选择具有特定用户界面状态的元素的选择器。这些伪类通常与表单元素和用户交互相关，它们可以帮助开发者针对用户的操作行为来改变元素的样式

5.4.1 常见的UI伪类

  1. :enabled
    • 用来选择处于启用状态的表单元素。
    • 示例：input:enabled { background-color: white; }
  2. :disabled
    • 用来选择处于禁用状态的表单元素。
    • 示例：input:disabled { background-color: grey; }
  3. :checked
    • 用来选择处于选中状态的radio按钮或checkbox。
    • 示例：input:checked + label { font-weight: bold; }
  4. :indeterminate
    • 用来选择处于不确定状态的checkbox或radio按钮（例如，一个checkbox作为一组checkbox的父项，用于表示部分选中状态）
    • 示例：input:indeterminate { background-color: orange; }
  5. :default
    • 用来选择页面中默认选中的表单元素，通常是表单中的默认按钮
    • 示例：button:default { border: 2px solid blue; }
  6. :valid
    • 用来选择输入验证通过的有效表单元素。
    • 示例：input:valid { border: 2px solid green; }
  7. :invalid
    • 用来选择输入验证未通过的无效表单元素。
    • 示例：input:invalid { border: 2px solid red; }
  8. :in-range
    • 用来选择数值在指定范围内的input元素（通常与<input type="number">或<input type="range">一起使用）
    • 示例：input:in-range { background-color: lightgreen; }
  9. :out-of-range
    • 用来选择数值超出指定范围的input元素。
    • 示例：input:out-of-range { background-color: pink; }
  10. :required
    • 用来选择设置了required属性的表单元素。
    • 示例：input:required { background-color: lightyellow; }
  11. :optional
    • 用来选择没有设置required属性的表单元素。
    • 示例：input:optional { background-color: lightblue; }
  12. :read-only
    • 用来选择设置了readonly属性的表单元素。
    • 示例：input:read-only { background-color: lightgrey; }
  13. :read-write
    • 用来选择没有设置readonly属性的表单元素，即可以被用户编辑的元素
    • 示例：input:read-write { background-color: white; }

5.4.2 示例代码一

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器-UI伪类-01</title>
  <style>
      body {
      
      
          font-family: 'Microsoft YaHei', sans-serif;
          background-color: #f4f4f4;
          margin: 20px;
          padding: 20px;
      }
      .form-group {
      
      
          margin-bottom: 10px;
      }
      /* 复选框和单选按钮的鼠标悬停样式 */
      input[type="checkbox"]:hover,
      input[type="radio"]:hover {
      
      
          border-color: #007bff;
      }
      /* 复选框被勾选的样式 */
      input[type="checkbox"]:checked {
      
      
          accent-color: #007bff; /* 使用accent-color属性改变复选框的勾选颜色 */
      }
      /* 单选按钮被选中的样式 */
      input[type="radio"]:checked {
      
      
          accent-color: #007bff; /* 使用accent-color属性改变单选按钮的勾选颜色 */
      }
  </style>
</head>
<body>
<h2>兴趣选择</h2>
<div class="form-group">
  <input type="checkbox" id="interest1">
  <label for="interest1">阅读</label>
</div>
<div class="form-group">
  <input type="checkbox" id="interest2">
  <label for="interest2">旅游</label>
</div>
<div class="form-group">
  <input type="checkbox" id="interest3">
  <label for="interest3">运动</label>
</div>
<div class="form-group">
  <input type="checkbox" id="interest4">
  <label for="interest4">音乐</label>
</div>

<h2>性别选择</h2>
<div class="form-group">
  <input type="radio" id="gender1" name="gender" value="male">
  <label for="gender1">男</label>
</div>
<div class="form-group">
  <input type="radio" id="gender2" name="gender" value="female">
  <label for="gender2">女</label>
</div>
</body>
</html>

5.4.3 示例代码二

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪类选择器-UI伪类-02</title>
  <style>
      /* 输入验证通过的有效表单元素样式 */
      input:valid {
      
      
          border: 2px solid green;
      }

      input:valid + span:after {
      
      
          content: "✔";
          color: green;
      }

      input:invalid + span:after {
      
      
          content: "X";
          color: #cd1763;
      }

      /* 数值在指定范围内的input元素样式 */
      input:in-range {
      
      
          background-color: lightgreen;
      }

      /* 设置了required属性的表单元素样式 */
      input:required {
      
      
          background-color: lightyellow;
      }

      /* 基础样式，用于显示校验图标 */
      span:after {
      
      
          margin-left: 8px;
      }
  </style>
</head>
<body>

<h2>注册表单</h2>

<form>
  <label for="username">姓名:</label>
  <input type="text" id="username" name="username" required>
  <span></span><br><br>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>
  <span></span><br><br>

  <label for="age">年龄:</label>
  <input type="number" id="age" name="age" min="18" max="99" required>
  <span></span><br><br>

  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  <span></span><br><br>

  <input type="submit" value="提交">
</form>

</body>
</html>

5.5 目标伪类

在CSS中，目标伪类（:target）用于选择和样式化文档中某个锚点目标元素。当URL包含一个片段标识符（通常是#后跟一个ID），指向文档中的某个元素时，:target伪类可以匹配到这个元素

示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪类选择器-目标伪类</title>
  <style>
      /* 初始化样式 */
      body {
      
      
          font-family: "Microsoft YaHei", sans-serif;
      }
      .question-list {
      
      
          list-style-type: none;
          padding: 0;
      }
      .question-item {
      
      
          margin-bottom: 10px;
          padding: 10px;
          background-color: #f2f2f2;
          border: 1px solid #ddd;
          cursor: pointer;
      }
      .answer {
      
      
          display: none;
          padding: 10px;
          background-color: #e9e9e9;
          border: 1px solid #ccc;
      }
      /* 目标伪类样式 */
      :target {
      
      
          display: block;
          animation: fadeIn 0.5s;
      }
      @keyframes fadeIn {
      
      
          from {
      
       opacity: 0; }
          to {
      
       opacity: 1; }
      }
  </style>
</head>
<body>

<h1>常见问题解答</h1>

<ul class="question-list">
  <li id="register-account" class="question-item">
    <a href="#register-account">如何注册账号？</a>
    <div class="answer">
      请访问注册页面，填写相关信息，并点击注册按钮即可。
    </div>
  </li>
  <li id="retrieve-password" class="question-item">
    <a href="#retrieve-password">如何找回密码？</a>
    <div class="answer">
      请点击登录页面的“忘记密码”链接，按提示操作即可。
    </div>
  </li>
  <li id="modify-personal-info" class="question-item">
    <a href="#modify-personal-info">如何修改个人信息？</a>
    <div class="answer">
      登录账号后，进入个人中心，点击编辑按钮即可修改。
    </div>
  </li>
</ul>

</body>
</html>

5.6 语言伪类

在CSS中，语言伪类（:lang）是一个用于根据元素的语言来选择元素的选择器。这个伪类可以基于文档的语言或元素的lang属性值来匹配元素。语言伪类在很多国际化（i18n）和多语言网站中非常有用，它允许开发者根据不同的语言应用特定的样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪类选择器-语言伪类</title>
  <style>
      /* 中文段落样式 */
      p:lang(zh-CN) {
      
      
          font-family: '宋体', serif;
          color: #00008B; /* 深蓝色 */
      }

      /* 英文段落样式 */
      p:lang(en) {
      
      
          font-family: 'Arial', sans-serif;
          color: #8B0000; /* 深红色 */
      }

      /* 法文段落样式 */
      p:lang(fr) {
      
      
          font-family: 'Times New Roman', serif;
          color: #006400; /* 深绿色 */
      }
  </style>
</head>
<body>

<p lang="zh-CN">这是一个中文段落，使用了宋体字体和深蓝色文本。</p>
<p lang="en">This is an English paragraph, using Arial font and dark red text.</p>
<p lang="fr">Ceci est un paragraphe en français, utilisant la police Times New Roman et du texte vert foncé.</p>

</body>
</html>

6. 伪元素选择器

伪元素选择器是CSS中用于选择和样式化文档中特定部分的特殊选择器。它们并不对应于文档树中的真实元素，而是由CSS创建的抽象元素，可以用于插入内容、样式化某些部分或执行特定的布局任务

6.1 常见的伪元素选择器

6.1.1 ::before

::before 伪元素可以在选定的元素之前插入内容。它通常与 content 属性一起使用

element::before {
    
    
  content: "前缀：";
  /* 其他样式 */
}`::after`

6.1.2 ::after

::after 伪元素可以在选定的元素之后插入内容。与 ::before 类似，它也需要 content 属性

element::after {
    
    
  content: "后缀";
  /* 其他样式 */
}

6.1.3 ::first-letter

::first-letter 伪元素用于选中元素的首字母，常用于创建首字下沉效果

p::first-letter {
    
    
  font-size: 200%;
  font-weight: bold;
}

6.1.4 ::first-line

::first-line 伪元素用于选中元素的第一行文本，可以用来改变首行文本的样式

p::first-line {
    
    
  font-weight: bold;
  text-decoration: underline;
}

6.1.5 ::selection

::selection 伪元素用于选中用户选中的文本部分，可以改变选中文本的样式

::selection {
    
    
  background-color: #bada55;
  color: white;
}

6.2 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪元素选择器演示</title>
  <style>
      /* 首字下沉效果 */
      .first-letter-drop-cap::first-letter {
      
      
          font-size: 3em;
          float: left;
          line-height: 1;
          padding-right: 0.1em;
      }

      /* 首行文本样式 */
      .first-line-style::first-line {
      
      
          font-weight: bold;
          color: #333333;
      }

      /* 链接点击前的提示 */
      a::before {
      
      
          content: "点击这里：";
          color: #1c67a8;
      }

      /* 用户选中文本的样式 */
      ::selection {
      
      
          background-color: #ffcc00;
          color: #000000;
      }
  </style>
</head>
<body>

<p class="first-letter-drop-cap">在很久很久以前，有一个美丽的传说。</p>

<p class="first-line-style">这是一个关于勇气和智慧的故事，讲述了一位英雄如何战胜困难，最终找到了传说中的宝藏。</p>

<p>了解更多故事，请<a href="https://example.com/story">访问我们的网站。</a></p>

</body>
</html>

7. 选择器的优先级

7.1 CSS选择器优先级规则

  • 内联样式 > ID选择器 > 类选择器、属性选择器、伪类选择器 > 元素选择器 > 通配选择器
  • 当两个CSS选择器具有相同的优先级时，后定义的样式将覆盖先定义的样式

CSS选择器优先级规则由高到低排列如下：

  1. 内联样式：直接在HTML元素上定义的样式具有最高的优先级
  2. ID选择器：通过元素的ID来选择元素，优先级仅次于内联样式
  3. 类选择器、属性选择器、伪类选择器：这三类选择器的优先级相同，并且低于ID选择器
  4. 标签选择器、伪元素：这两类选择器的优先级相同，并且低于类选择器、属性选择器和伪类
  5. 通配符选择器：优先级最低

7.2 CSS选择器优先级的计算方法

  • 计算ID选择器的数量（a）
  • 计算类选择器、属性选择器和伪类的数量（b）
  • 计算标签选择器和伪元素的数量（c）
  • 优先级由a, b, c的值来决定，从左到右比较，值越大优先级越高

7.3 如何查看CSS选择器的优先级

在 VsCode、WebStorm、IDEA 等软件中，将鼠标悬浮在 CSS 选择器上，选择器的优先级就会显示出来了

在这里插入图片描述

7.4 !important

!important声明可以覆盖所有其他规则，但应谨慎使用

7.5 示例代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>选择器发优先级</title>
  <style>
      /* 通配符选择器 */
      * {
      
      
          box-sizing: border-box;
      }

      /* 标签选择器 */
      body {
      
      
          font-family: 'Arial', sans-serif;
      }

      h1, h2 {
      
      
          color: black;
      }

      p {
      
      
          color: gray;
      }

      /* 类选择器 */
      .book-title {
      
      
          color: blue;
      }

      .book-price {
      
      
          color: green;
      }

      /* 属性选择器 */
      [data-discount] {
      
      
          text-decoration: line-through;
      }

      /* 伪类选择器 */
      a:hover {
      
      
          text-decoration: underline;
      }

      /* ID选择器 */
      #featured-books {
      
      
          background-color: lightgray;
          padding: 10px;
      }

      /* 内联样式 - 最高优先级 */
      span[style] {
      
      
          color: red !important;
      }

      /* 子选择器 */
      ul > li {
      
      
          margin-bottom: 5px;
      }

      /* 后代选择器 */
      .comments p {
      
      
          color: darkgray;
      }

      /* 复合选择器 */
      div.book-item .book-title {
      
      
          font-size: 1.5em;
      }

      #featured-books .book-item {
      
      
          border: 1px solid #ddd;
          padding: 10px;
          margin-bottom: 10px;
      }

      /* 伪元素选择器 */
      p::first-line {
      
      
          font-weight: bold;
      }

      /* 组合选择器 */
      .book-list .book-item:nth-child(even) {
      
      
          background-color: #f9f9f9;
      }
  </style>
</head>
<body>
<!-- 页面头部 -->
<header>
  <h1>欢迎来到在线书店</h1>
</header>

<!-- 推荐书籍 -->
<section id="featured-books">
  <h2>本周推荐书籍</h2>
  <ul>
    <li class="book-item">
      <div class="book-title">JavaScript高级程序设计</div>
      <div class="book-price" data-discount="true">¥60.00</div>
      <span style="color: purple;">特价优惠！</span>
      <a href="#">了解更多</a>
    </li>
    <li class="book-item">
      <div class="book-title">深入浅出React和Redux</div>
      <div class="book-price">¥50.00</div>
      <a href="#">了解更多</a>
    </li>
  </ul>
</section>

<!-- 用户评论区 -->
<section class="comments">
  <h2>用户评论</h2>
  <p>这本书真的非常有用，强烈推荐！</p>
  <p>内容详实，适合初学者。</p>
</section>

<!-- 书籍列表 -->
<section class="book-list">
  <h2>全部书籍</h2>
  <div class="book-item">
    <div class="book-title">你不知道的故事背后的秘密</div>
    <div class="book-price">¥45.00</div>
    <p>一段介绍文字...</p>
  </div>
  <div class="book-item">
    <div class="book-title">前端开发指南</div>
    <div class="book-price" data-discount="true">¥70.00</div>
    <p>另一段介绍文字...</p>
  </div>
</section>
</body>
</html>

阅读完本文后可以阅读下一篇文章：CSS的常见属性（列表相关属性、边框相关属性、表格独有属性、背景相关属性、鼠标相关属性、常用长度单位、元素的显示模式）

猜你喜欢

目录

热门文章