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 ...
随机推荐
- 【转载】GPIO模拟i2c通信
I2C总线的通信过程(见图4-8)主要包含三个主要阶段:起始阶段.数据传输阶段和终止阶段. 1. 起始阶段 在I2C总线不工作的情况下,SDA(数据线)和SCL(时钟线)上的信号均为高电平.如果此时主 ...
- 关于Java中volatile关键字笔记
volatile通常被认为是一种轻量级的synchronized,字面上它表示易变的,在并发编程中,它保证了共享变量的可见性.所谓可见性指的是,某个线程对变量进行操作后,其他线程能够读取到操作后的最新 ...
- 在Ubuntu中使用JAVA与tomcat搭建web服务器
一:材料 1.操作系统:ubuntu16.04 2.JAVA: jdk1.8.0 3.Tomcat:tomcat 8 4.域名:zhuandshao.cn 二:过程 1.安装java 1)在官网下载j ...
- LRU Cache java实现
要求: get(key):如果key在cache中,则返回对应的value值,否则返回null set(key,value):如果key不在cache中,则将该(key,value)插入cache中( ...
- Java工程中使用Mybatis （工程结合Mybatis，数据可以结合Swing使用）
2011年6月iBatis 更名为 MyBatis,从 iBatis 到 MyBatis,不只是名称上的变化,MyBatis 提供了更为强大的功能,同时并没有损失其易用性,相反,在很多地方都借助于 J ...
- register_sysctl_table实现内核数据交互
作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. Sysctl是一种用户应用来设置和获得运行时内核的配置参数的一种有效方式,通 ...
- 如何在Linux下快速安装MapTiler
研究背景: 实际项目用到MapTiler时,为了适应项目不同场景需求,需要测试MapTiler在linux下切图速度,这时就涉及到到MapTiler在Linux下安装的问题,从 M ...
- codeforce vk cup2017
D. k-Interesting Pairs Of Integers time limit per test 2 seconds memory limit per test 256 megabytes ...
- 【跑会指南】2017年3-5月IT技术会议大合集
2016年各类大会让人应接不暇,技术圈儿最不缺的就是各种大会小会,有的纯干货,有的纯广告.作为一名技术开发者,参加了几场大会,你是不是也开始思忖:究竟哪些会议才值得参加?下面活动家为你推荐几场2017 ...
- 从Python小白到第一个小游戏发布
1.安装必要的环境(附图两张) 直接下载安装程序,本人win10系统,根据电脑系统下载并安装对应的python.exe,安装路径可以选择D盘的,具体安装细节这里就不说了,不知道的可以留言或者找度娘 2 ...