WEB前端教程：精准定位你想美化的元素

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

课程目标

学习层叠、优先级，以及在 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区别

总结

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

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

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码，免费获取 Python公开课和大佬打包整理的几百G的学习资料，内容包含但不限于Python电子书、教程、项目接单、源码等等

发表于 2022-10-14 10:16
阅读 ( 453 )
分类：WEB前端开发

WEB前端教程：精准定位你想美化的元素

课程目标

课程描述

阅读

编码一

编码二

编码三

编码四

自测问题

总结

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »