选择器的使用(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选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
随机推荐
- git 恢复误删的文件
误删的文件如何恢复呢? 执行下面的命令: 1. git reset HEAD a.txt 2. git checkout a.txt 注意:上面两个命令,可以帮我们找回删除的文件,但是对文件内容的修改 ...
- jvm 脑图
- Xaml中的转义字符
字符 转义字符 备注 & (ampersand) & 这个没什么特别的,几乎所有的地方都需要使用转义字符 > (greater-than character) > 在属性( ...
- WebService 生成客户端
webservice 生成客户端 wsdl2java -encoding UTF-8 -p com.trm -d D:\happywork -client http://localhost/trm-t ...
- Jmeter重要组件介绍（一）
一.常用的取样器 二.常用的逻辑控制器 三.前置处理器 四.后置处理器 五.断言 六.定时器 七.配置元件 八.监听器
- vim 将文件所有行合并到一行
vim 将文件所有行合并到一行 在 Normal Mode下执行: ggvGJ gg 用于跳到行首 v 转换成 visual 模式 G 跳到最后一行 J 合并行
- MFC线程获取主窗口句柄
CWnd* h_q = AfxGetApp()->GetMainWnd(); //获取主窗口的句柄
- OAuth - 第三方登录的原理
第三方登录的原理 所谓第三方登录,实质就是 OAuth 授权.用户想要登录 A 网站,A 网站让用户提供第三方网站的数据,证明自己的身份.获取第三方网站的身份数据,就需要 OAuth 授权. 举例来说 ...
- Python re模块 subprocess模块
re模块 内部实现不是Python 而是调用了c的库 re是什么 正则 表达 式子 就是一些带有特殊含义的符号或者符号的组合作用: 对字符串进行过滤 在一对字符串中找到所关心的内容 你就需要告诉计算机 ...
- dubbo理解
Dubbo服务的调用基本上都是出现在分布式项目中,最常见的电商网站.涉及买卖的APP等. 比如某个购物APP,目前最常见的架构就是做成分布式架构,拆分成很多个系统,比如用户模块.短信模块.产品模块.订 ...