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 ...
随机推荐
- IE和其他浏览器用JS新窗口打开的问题
Chrome中 window.open(pageURL,name,parameters) pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 例 ...
- extj6.0写增删查改（1）-------查询
本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...
- 工资不高也要给自己放假 这几款APP估计你用得上
我是这样的一个人,我宁愿工资不高,只要给我足够的假期,那我就满足了.都说上班就是为了赚钱,但如果身体不好,赚再多的钱也是无福享受,所以建议各位,有机会的话,一定要抽出时间去旅游,去放松. 现在我们外出 ...
- .net core CLI(创建VueJS||Angular结合的项目)
net core cli 是快速创建模板项目 安装CLI 参考: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.as ...
- laytpl--前端数据绑定
发现一枚前端数据绑定导弹:laytpl,官网:http://www.layui.com/laytpl/ 为了不用angularJS等较为重量级的,和繁琐的配置,所以就用了laytpl,可以配合JQ使用 ...
- [原创] 绿色单文件封装程序GreenOne V3.0
1.原理 将包含可执行文件的多个文件 调用Winrar,创建自解压格式压缩文件 设置高级自解压选项中的文本和图标,设置解压后运行的文件为选中的可执行文件. 这种创建单文件封装其实也就是一个Winrar ...
- poj3160强连通分量加dfs
After retirement as contestant from WHU ACM Team, flymouse volunteered to do the odds and ends such ...
- java.util.prefs.Preferences
java.util.prefs.Preferences Preferences类是在JDK1.4中首次提供的,可以用它来存放应用程序的配置数据,这里对Preferences类做点介绍. 1.Prefe ...
- OC中自定义构造方法
格式 -(instancetype)init(){ self=[super init] if(self){ } return self; } 自定义构造方法规范 1)一定是对象方法,以减号开头 2)返 ...
- Java并发，看到了，就记录下呗
在这篇博客中,主要把之前看的书的内容记录一下,个人感觉还是可以的,原题是这样的:开发一个高效的缓存.这里指的是单机. 首先我来看当前的一个版本 public interface Computable& ...