百度前端技术学园

# 精准定位你想美化的元素

# 课程目标

  • 学习层叠、优先级，以及在 CSS 中继承是如何工作的
  • 掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性。

# 课程描述

上一节我们学习了 CSS 的基本概念，基本的选择器,今天我们会进一步学习 CSS 选择器相关的知识，但在开始之前，推荐你把昨天的阅读材料和自己写的代码花上半小时时间，回顾一下。

# 阅读

接下来，我们暂时不学习新的属性设置，我们回头来看看选择器的问题，昨天我们学习了简单选择器和属性选择器，我们今天学习剩余的其他选择器及相关语法

# 编码一

使用层次选择器给嵌套列表添加如下 CSS 样式

  • 选中第一层列表，添加外边框
  • 选中第二层列表，设置背景颜色为#eee
  • 选中第三层列表,添加虚线外边框
  • 选中每一个列表的第一个列表项目设置字体为粗体,添加下边框，添加背景颜色为黑色，字体颜色为白色
  • 选中第三层列表，给最后一个列表项 li，设置字体为斜体，字体为白色，添加背景颜色为黑色。
<ul>
  <li>
    第一层列表第一项
    <ol>
      <li>第二层列表第一项</li>
      <li>第二层列表第二项</li>
      <li>
        第二层列表第三项
        <ol>
          <li>第三层列表第一项</li>
          <li>第三层列表第二项</li>
          <li>第三层列表第三项</li>
        </ol>
      </li>
      <li>第三层列表第四项</li>
    </ol>
  </li>
  <li>第一层列表第二项</li>
  <li>第一层列表第三项</li>
</ul>

# 编码二

应用属性选择器给如下表格添加如下 CSS 样式

  • 使用伪元素选择器，给表格设置单行背景色为#eee，双号数行为背景色为白色
  • 选中所有标题栏，设置背景颜色为黑色，字体为白色
  • 应用伪元素选择器，选中第一列单元格，设置背景颜色为黑色，字体为白色，粗体。
  • 应用伪元素选择器，选中倍数为 3 的单元格，设置透明度为 0.9
<table>
  <caption>
    TABLE SAMPLE
  </caption>
  <thead>
    <tr>
      <th>title one</th>
      <th>title two</th>
      <th>title three</th>
      <th>title four</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>content1</th>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <th>content5</th>
      <td>content6</td>
      <td>content7</td>
      <td>content8</td>
    </tr>
    <tr>
      <th>content9</th>
      <td>content10</td>
      <td>content11</td>
      <td>content12</td>
    </tr>
    <tr>
      <th>content13</th>
      <td>content14</td>
      <td>content15</td>
      <td>content16</td>
    </tr>
  </tbody>
</table>

# 编码三

应用属性选择器给下列链接列表添加如下 CSS 样式

  • 链接文本的样式：使链接为红色，被访问后变为绿色，当被 hover 时，移除链接文本的下划线。
  • 应用属性选择器选中链接 href 值中包含 contact 字段的 a 标签,设置下划线为粉红色
  • 应用属性选择器选中链接 href 值中包含 以 http 字段开头的 a 标签,设置边框为蓝色
<ul>
  <li><a href="https://example.com">Link 1</a></li>
  <li><a href="http://example.com" title="Visit example.com">Link 2</a></li>
  <li><a href="/contact">Link 3</a></li>
  <li><a href="../contact/index.html">Link 4</a></li>
</ul>
<input type="text" />

# 编码四

对目前简历的 CSS 代码进行审视，优化选择器的应用。

# 自测问题

学习之后，对下列问题进行自我回答来检验自己本次学习的理论知识掌握程度。

  • 思考 CSS 各种选择器的概念，使用方法及使用场景
  • 说说 CSS 选择器的优先级是怎么排序的？给标签选择器，类选择器，id 选择器三个选择器优先级进行排序
  • 如果为 css 规则添加!important，会出现什么效果？
  • 给div h1、 #div h1、h1、div h1 #_h、div h1.c_h这几个选择器进行排序
  • 说说E:nth-last-of-type与E:last-child区别

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

# 相关阅读

← 制作一些有趣的效果 →