CSS3学习系列之选择器（二）
- first-child选择器和last-child选择器
first-child指定第一个元素。last-child指定最后一个子元素。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first-child选择器与last-child选择器使用示例</title>
<style>
li:first-child{
background-color: yellow;
}
li:last-child{
background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>
- nth-child选择器和nth-last-child选择器
指定父元素中某个指定序号的子元素来指定样式。指定方法如下所示：
nth-child(n){
//指定样式
}
<子元素>:nth-last-child(n){
//指定样式
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style>
li:nth-child(2){
background-color: yellow;
}
li:nth-last-child(2){
background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>
- 对所有第奇数个子元素或第偶数个子元素使用样式
使用方法如下：
nth-child(odd){
//指定样式
}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(even){
//指定样式
}
//所有倒数上去的奇数个子元素
<子元素>:nth-last-child(odd){
//指定样式
}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(even){
//指定样式
}
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style>
li:nth-child(odd){
background-color: yellow;
}
li:nth-child(even){
background-color: skyblue;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>
- 选择器nth-of-type和nth-last-of-type
nth-child在使用过程中会有问题，问题产生的原因是，nth-child选择器在计算子元素是第奇数个元素还是第偶数个元素的时候，是连同父元素中的所有子元素一起计算的。CSS3中使用nth-of-type选择器和nth-last-of-type选择器可以避免这类问题的发生，使用这两个选择器的时候，CSS3在计算子元素时第奇数个子元素还是偶数个子元素的时候，就只针对同类型的子元素进行计算，使用方法如下：
h2:nth-of-type(odd){
background-color:yellow;
}
h2:nth-of-type(even){
background-color:skyblue;
}
- 循环使用样式
li:nth-child(4n+1){
background-color:yellow
}
li:nth-child(4n+2){
background-color:limegreen;
}
li:nth-child(4n+3){
background-color:red;
}
li:nth-child(4n+4){
background-color:white;
}
这样样式会隔4循环样式。奇数个和偶数个也可以改写成下面方式：
//所有正数下来的第奇数个子元素
<子元素>:nth-child(2n+1){
//指定样式
}
//所有正数下来的第偶数个子元素
<子元素>:nth-child(2n+2){
//指定样式
}
//所有倒数上去的第奇数个子元素
<子元素>:nth-last-child(2n+1){
//指定样式
}
//所有倒数上去的第偶数个子元素
<子元素>:nth-last-child(2n+2){
//指定样式
}
- only-child选择器
only-child选择是指定当某个元素中只有一个子元素时才使用的样式。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child选择器与nth-last-child选择器使用示例</title>
<style>
li:only-child{
background-color: yellow;
}
</style>
</head>
<body>
<h2>列表A</h2>
<ul>
<li>列表项目1</li>
</ul>
</body>
</html>
- UI元素状态伪类选择器
UI元素状态伪类选择器的共同特征是：指定的样式只有当元素处于某种状态下时才起作用，在默认状态下不起作用。在CSS3中，共有11种UI元素状态伪类选择器，分别是E:hover、E:active、E :focus、E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate及E::selection。
- 选择器：E:hover、E:active和E:focus
E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式。
E:active选择器用来指定元素被激活（鼠标在元素上按下还没有松开）时使用的样式。
E:focus选择器用来指定元素获得光标焦点时使用的样式，主要在文本框控件获得焦点并进行文字输入的时候使用。例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E:hover选择器、E:active选择器与E:focus选择器使用示例</title>
<style>
input[type="text"]:hover {
background-color: greenyellow;
} input[type="text"]:focus {
background-color: skyblue;
}
input[type="text"]:active{
background-color: yellow;
}
</style>
</head>
<body>
<form>
<p>姓名：<input type="text" name="name"></p>
<p>地址：<input type="text" name="address"></p>
</form>
</body>
</html>
CSS3学习系列之选择器（二）的更多相关文章
- css3学习系列之选择器（一）
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器（四）
使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...
- CSS3学习系列之选择器（三）
E:enabled伪类选择器和E:disabled伪类选择器 E:enabled伪类选择器用来指定元素处于可用状态的样式. E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个 ...
- css3的那些高级选择器二
在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...
- Dubbo学习系列之十二（Quartz任务调度）
Quartz词义为"石英"水晶,然后聪明的人类利用它发明了石英手表,因石英晶体在受到电流影响时,它会产生规律的振动,于是,这种时间上的规律,也被应用到了软件界,来命名了一款任务调度 ...
- CSS3学习系列之盒样式（二）
text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...
- CSS3学习系列之背景相关样式（二）
在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...
- CSS3学习系列之布局样式（二）
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...
- css3学习总结1--CSS3选择器
CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...
随机推荐
- iOS数据本地化
本篇随笔除了介绍 iOS 数据持久化知识之外,还贯穿了以下内容: (1)自定义 TableView,结合 block 从 ViewController 中分离出 View,轻 ViewControll ...
- 关于Java中Arrays.sort()方法TLE
最近一直在练用Java写题,今天无意发现一道很简单的二分题(链接),我一开始是直接开int[]数组调用Arrays.sort()去排序,没想到TLE了,原来是因为jdk中对于int[]的排序是使用快速 ...
- Filter和Listener的应用——分IP统计网站访问次数
一:分析 统计工作需要在所有资源执行前进行,所以需要放在filter中 这个拦截器仅仅进行统计工作,不进行拦截,所以请求必须继续传递下去 用Map<String,integer>来保存数据 ...
- bzoj2125 最短路
Description 给一个N个点M条边的连通无向图,满足每条边最多属于一个环,有Q组询问,每次询问两点之间的最短路径. Input 输入的第一行包含三个整数,分别表示N和M和Q 下接M行,每行三个 ...
- Supervisor: A Process Control System
Supervisor: 进程控制系统 概述:Supervisor是一个 Client/Server模式的系统,允许用户在类unix操作系统上监视和控制多个进程,或者可以说是多个程序. 它与launch ...
- 1.1Hibernate持久化类和Hibernate持久化对象状态
一.持久化对象po类 1.po定义 PO,是Persistent Object的缩写,是持久化类.PO是由PO=POJO+hbm映射配置组成. 2.通俗理解 PO类即持久化类,其实就是一个普通的Jav ...
- eclipse--java工程转web工程 以及 java或java web工程转maven工程
1. 打开工程文件夹,编辑工程的.project文件. 在<natures></natures>中加入 <nature>org.eclipse.wst.commo ...
- Java基础之equals方法和"= ="的区别
==操作符专门用来比较两个变量的值是否相等,也就是用于比较变量所对应的内存中所存储的数值是否相同,要比较两个基本类型的数据或两个引用变量是否相等,只能用==操作符. 如果一个变量指向的数据是对象类型的 ...
- 基于django做HTTP代理服务器
计算机网络的一次小实验,最后一共用了不到100行 实现了: a) 网站过滤:允许/不允许访问某些网站: b) 用户过滤:支持/不支持某些用户访问外部网站: c) 网站引导:将用户对某个网站的访问引导至 ...
- pygame开发滑雪者游戏
pygame开发滑雪者游戏 一.实验说明 下述介绍为实验楼默认环境,如果您使用的是定制环境,请修改成您自己的环境介绍. 1. 环境登录 无需密码自动登录,系统用户名 shiyanlou,该用户具备 s ...