选择器的使用(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选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
随机推荐
- Thinkphp删除缓存
控制器代码 public function delcache(){ //当找到有Runtime的文件夹时,进入if if(is_dir(RUNTIME_PATH)){ delDir(RUNTIME ...
- Android SpannableString及字体设置
import android.content.Context; import android.graphics.Color; import android.text.SpannableString; ...
- 使用Jenkins进行android项目的自动构建（1）
环境搭建 1. 下载JDK,安装,并将JDK的安装目录加入到环境变量JAVA_HOME,将JDK的bin目录加入到环境变量PATH. 2. 下载Android SDK,解压,并将SDK的安装目录加入到 ...
- Sass的的使用一
sass -v 检测是否安装 Sass 成功 gem update sass 更新 Sass gem uninstall sass 删除/卸载 Sass 的编译有多种方法: 1.命令编译2.GUI工具 ...
- 用npm来部署快速一个httpweb服务器
https://blog.csdn.net/u012182627/article/details/55060594 http-server的安装######注意事项 安装http-server的时候 ...
- 安装gitlab并配置邮箱
安装要求:运行内存必须大于等于2G 一.安装docker wget -qO- https://get.docker.com/ | sh 镜像加速: echo '{"registry-mirr ...
- HTML head meta标签详细
<!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...
- 【原】CentosDocker安装（一）
CentosDocker安装 来源:https://www.runoob.com/docker/centos-docker-install.html 1.前提条件 目前,CentOS 仅发行版本中的内 ...
- selenium webdriver 常用断言
断言常用的有: assertLocation(判断当前是在正确的页面). assertTitle(检查当前页面的title是否正确). assertValue(检查input的值, checkbox或 ...
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...