选择器的使用(first-child和last-child选择器)
<!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选择器)的更多相关文章
- 突破css选择器的局限，实现一个css地址选择器?
首先看一个效果,注意地址栏的变化 然后思考一下,用css如何实现? css选择器的局限 选择器是css中的一大特色,用于选择需要添加样式的元素. 选择器的种类有很多,比如 元素选择器 p {color ...
- jQuery选择器方式-用的不多的name选择器
id:$("#id") name:$("[name='name']") class:$(".class") element:$(" ...
- css伪类选择器详细解析及案例使用-----伪类选择器（2）
结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...
- css伪类选择器详细解析及案例使用-----伪类选择器（1）
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- css 为元素选择器，css目标状态伪类，结构化选择器，多媒体选择器，清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
- CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...
- 项模板选择器属性（ItemTemplateSelector属性）和样式选择器（ItemContainerStyleSelector）
3.4.5 共享尺寸组 样式选择器: 或者========================================
- CSS3 01. CSS3现状、属性选择器、伪类选择器、结构伪类、伪元素选择器、颜色、文本阴影shadow、盒子模型、私有化前缀
CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 ...
- JS选择器querySelector和~All，三个原生选择器
定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
随机推荐
- rabiitmq
Rabbitmq集群高可用 RabbitMQ是用erlang开发的,集群非常方便,因为erlang天生就是一门分布式语言,但其本身并不支持负载均衡. Rabbit模式大概分为以下三种:单一模式.普通模 ...
- MySQL学习随笔--通过实例理解merge ,temptable算法的差异
实例1 使用视图的两种算法merge和temptable分别统计 表tb_phone中market_price大于4000的手机,然后查询视图查找出小于6000的手机 简单总结最终获取的结果:查询出m ...
- 梅沙教育APP简单分析-版本：iOS v1.2.21-Nathaneko-佳钦
梅沙教育APP简单分析 时间:2017年6月6日 版本:iOS v1.2.21 分析人:Nathaneko-佳钦 备注:仅仅是个人一些简单的分析与见解,非正式产品分析报告,未体验购买相关功能,可能存在 ...
- HDU_1237_简单计算器
运算符为+,-,*,/:操作数为整数:且没有括号 设定符号优先级,先在栈底压运算符0 #include<iostream> #include<cstdio> #include& ...
- 编写高质量Python代码的59个有效方法
Python学习资料或者需要代码.视频加Python学习群:960410445 1. 用Pythonic方式思考 第一条:确认自己使用的Python版本 (1)有两个版本的python处于活跃状态,p ...
- JDK1.8中的Stream详解
Stream简介 Stream 作为 Java 8 的一大亮点,它与 java.io 包里的 InputStream 和 OutputStream 是完全不同的概念.它也不同于 StAX 对 XML ...
- Tensorflow入门-上
前置准备 在阅读本文之前,请确定你已经了解神经网络的基本结构以及前向传播.后向传播的基本原理,如果尚未了解,可以查看下文. 深度学习之神经网络 什么是TensorFlow? TensorFlow是Go ...
- 6-Java-C（移动距离）
题目描述: X星球居民小区的楼房全是一样的,并且按矩阵样式排列.其楼房的编号为1,2,3... 当排满一行时,从下一行相邻的楼往反方向排号. 比如:当小区排号宽度为6时,开始情形如下: 1 2 3 ...
- AUSU 安装Win10注意事项
Win10 U盘原版安装 安装前在电脑店PE里用DiskGenius分区分区表类型:GUID勾选:创建新ESP分区 . 创建MSR分区 安装必须使用UEFI引导和GPT硬盘,否则会提示无法安装Win1 ...
- E. String Multiplication
E. String Multiplication time limit per test 2 seconds memory limit per test 256 megabytes input sta ...