选择器的使用(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选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
随机推荐
- 2019最新版Devops工具集
啥是Devops? 简单地来说,就是开发(DEV).测试(QA).运维(OPS)的流程,开发运维一体化,通过高度自动化工具与流程来使得软件构建.测试.发布更加快捷.频繁和可靠. 当然现实的DevOps ...
- jquery 序列化form表单
1.为什么要将form表单序列化? ajax上传form表单的原始方式,是将form表单中所需要的键值对先获取,然后再组装成数据(两种方式:http:localhost:8080/test.do?pe ...
- Node.js——网站访问一般流程
- CentOS6.8 RPM包安装快速zabbix22
CentOS6.8 RPM包安装快速zabbix22 yum install -y epel-release # yum install -y httpd php php-devel mysql-se ...
- vuex相关的知识
vue的核心是store,它可以看作是一个容器,它包含着应用中的状态state(state,mutations,actions,getters, modules).它中的存储是响应式的,当store中 ...
- Python3.0 操作MySQL数据库执行SQL语句
py3不支持MySQLdb,需要导入pymysql模块 # coding: utf-8 # Team : Quality Management Center # Author:Carson # Dat ...
- cat - 连接文件并在标准输出上输出
SYNOPSIS 总览 cat [选项列表] [文件列表]... DESCRIPTION 描述 将文件列表中的文件或标准输入连接到标准输出. -A, --show-all 等价于 -vET . -b, ...
- JavaSE-20 IO序列化
学习要点 定义 IO如何序列化 序列化 序列化:是将对象的状态存储到特定存储介质中的过程. 反序列化:从特定存储介质中的数据重新构建对象的过程. 实现了java.io.Serializable接口的类 ...
- Laravel核心解读 -- 扩展用户认证系统
扩展用户认证系统 上一节我们介绍了Laravel Auth系统实现的一些细节知道了Laravel是如何应用看守器和用户提供器来进行用户认证的,但是针对我们自己开发的项目或多或少地我们都会需要在自带的看 ...
- c++基础_特殊回文数
#include <iostream> using namespace std; int main(){ int n; cin>>n; ;i<;i++){ int tem ...