zoukankan      html  css  js  c++  java
  • 【CSS3】---结构性伪类选择器-first-child+last-child

    结构性伪类选择器—first-child

    “:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素。

    示例演示

    通过“:first-child”选择器定位列表中的第一个列表项,并将序列号颜色变为红色。

    HTML代码:

    <ol>
      <li><a href="##">Link1</a></li>
      <li><a href="##">Link2</a></li>
      <li><a href="##">link3</a></li>
    </ol>

    CSS代码:

    ol > li{
      font-size:20px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    ol a {
      font-size: 16px;
      font-weight: normal;
    }
    
    ol > li:first-child{
      color: red;
    }

    演示结果:

    结构性伪类选择器—last-child

    “:last-child”选择器与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器,

    ul>li:last-child{background:blue;}

    示例演示

    在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博客“post”中最后一个段落不需要底部的margin值,可以使用“:last-child”选择器。

    HTML代码:

    <div class="post">
      <p>第一段落</p>
      <p>第二段落</p>
      <p>第三段落</p>
      <p>第四段落</p>
      <p>第五段落</p>
    </div>

    CSS代码:

    .post {
      padding: 10px;
      border: 1px solid #ccc;
      width: 200px;
      margin: 20px auto;
    }
    .post p {
      margin:0 0 15px 0;
    }
    
    .post p:last-child {
      margin-bottom:0;
    }

    演示结果:

  • 相关阅读:
    Nginx——基本操作
    JavaWeb——关于RequestDispatcher的原理
    JavaWeb——XML转义符字
    JavaWeb——JSTL 核心标签库使用
    JavaWeb——jsp-config
    URL和URI区别
    Docker入门5------生产力工具docker-compose
    Docker入门4------Dockerfile
    Docker入门3------手动编辑自定义镜像
    Docker入门2------容器container常规操作
  • 原文地址:https://www.cnblogs.com/itguliang/p/4450666.html
Copyright © 2011-2022 走看看