<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        li:first-child {
        background-color:limegreen;
        }
        li:last-child {
        background-color:red;
        }
    </style>
</head>
<body>
    <h2>列表A</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
    <hr  />
    <h2>列表B</h2>
    <ul>
        <li>列表项目1</li>
        <li>列表项目2</li>
        <li>列表项目3</li>
        <li>列表项目4</li>
        <li>列表项目5</li>
    </ul>
</body>
</html>

效果如下：

选择器的使用(first-child和last-child选择器)的更多相关文章

  1. 突破css选择器的局限，实现一个css地址选择器?

    首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...

  2. jQuery选择器方式-用的不多的name选择器

    id:$("#id") name:$("[name='name']") class:$(".class") element:$(" ...

  3. css伪类选择器详细解析及案例使用-----伪类选择器（2）

    结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...

  4. css伪类选择器详细解析及案例使用-----伪类选择器（1）

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  5. css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器

    伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...

  6. CSS3中结构伪类选择器——root、not、empty、target选择器

    1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...

  7. 项模板选择器属性（ItemTemplateSelector属性）和样式选择器（ItemContainerStyleSelector）

    3.4.5 共享尺寸组 样式选择器: 或者========================================

  8. CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀

    CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...

  9. JS选择器querySelector和~All，三个原生选择器

    定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请 ...

  10. 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器

    今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...

随机推荐

  1. 快速排序算法原理及其js实现

    要说快排的原理,通俗点说就是把一个事情,分成很多小事情来处理,分治的思想. 假设我们现在对“6  1  2 7  9  3  4  5 10  8”这10个数进行排序.首先在这个序列中随便找一个数作为 ...

  2. java 线程池第一篇 之 ThreadPoolExcutor

    一:什么是线程池? java 线程池是将大量的线程集中管理的类,包括对线程的创建,资源的管理,线程生命周期的管理.当系统中存在大量的异步任务的时候就考虑使用java线程池管理所有的线程.减少系统资源的 ...

  3. iOS Programming Camera 1

     iOS Programming Camera  1 1 Displaying Images and UIImageView 1.1  put an instance of UIImageView o ...

  4. CAS4.0 server 环境的搭建

    1.上cas的官网下载cas server 官网地址:https://github.com/Jasig/cas/releases,下载好后 解压下载的 cas-server-4.0.0-release ...

  5. [小记]Android缓存问题

    今天晚上,产品经理打电话说我们的Android App除了问题,问题很简单就是一个缓存问题,由于这个程序是前同事写的,我也只能呵呵一笑,有些事你就得扛.还是回到正题吧,这个缓存问题,实在有点奇葩,所以 ...

  6. CAD参数绘制圆（com接口）

    CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以设置圆的圆心位置及半径属性. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下: 参数 说明 DOUBL ...

  7. win下配置qt creator 能够执行c/c++

    首先需要相关包共四个: qt-win-opensource-4.8.5-mingw.exe qt-creator-windows-opensource-2.8.1.exe MinGW-gcc440_1 ...

  8. my @unpacking_list = values %map_function; print "\n".@unpacking_list; 输出是3 把 @unpacking_list 当做一个数 输出了

      my %map_function = (     88     "OK_func" => "open_statement",     89     & ...

  9. Delphi最简化异步选择TCP服务器

    网上Delphi的Socket服务器优良代码,实在少见,索性写个简化的异步Socket服务器,虽然代码较少,但却该有的都有了,使用的是异步选择WSAAsyncSelect,减少了编写线程的繁琐.可能会 ...

  10. install docker on centos7

    copy from:https://www.youtube.com/watch?v=pm55BUwQ0iE # Prerequisites - Kernel must be 3.10 at minim ...