• 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学习系列之选择器(二)的更多相关文章

  1. css3学习系列之选择器(一)

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  2. CSS3学习系列之选择器(四)

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  3. CSS3学习系列之选择器(三)

    E:enabled伪类选择器和E:disabled伪类选择器 E:enabled伪类选择器用来指定元素处于可用状态的样式. E:disabled伪类选择器用来指定当元素处于不可用状态时的样式. 当一个 ...

  4. css3的那些高级选择器二

    在上个星期我介绍了css3的属性选择器,伪类选择器和结构伪类选择器,今天楼主继续把其它的css3选择器说完. 在css3中,共有11中UI状态伪类选择器,分别是E:hover,E:active,E:f ...

  5. Dubbo学习系列之十二(Quartz任务调度)

    Quartz词义为"石英"水晶,然后聪明的人类利用它发明了石英手表,因石英晶体在受到电流影响时,它会产生规律的振动,于是,这种时间上的规律,也被应用到了软件界,来命名了一款任务调度 ...

  6. CSS3学习系列之盒样式(二)

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  7. CSS3学习系列之背景相关样式(二)

    在border-radius属性中指定两个半径 在border-radius属性中,可以指定两个半径,指定方法如下所示: border-radius:40px 20px; 针对这种情况,各种浏览器的处 ...

  8. CSS3学习系列之布局样式(二)

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

  9. css3学习总结1--CSS3选择器

    CSS3的属性选择器主要包括以下几种: 1. E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的: 2. E[attr$="valu ...

随机推荐

  1. IE和其他浏览器用JS新窗口打开的问题

    Chrome中 window.open(pageURL,name,parameters) pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 例 ...

  2. extj6.0写增删查改(1)-------查询

    本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onS ...

  3. 工资不高也要给自己放假 这几款APP估计你用得上

    我是这样的一个人,我宁愿工资不高,只要给我足够的假期,那我就满足了.都说上班就是为了赚钱,但如果身体不好,赚再多的钱也是无福享受,所以建议各位,有机会的话,一定要抽出时间去旅游,去放松. 现在我们外出 ...

  4. .net core CLI(创建VueJS||Angular结合的项目)

    net core cli 是快速创建模板项目 安装CLI 参考: https://www.hanselman.com/blog/dotnetNewAngularAndDotnetNewReact.as ...

  5. laytpl--前端数据绑定

    发现一枚前端数据绑定导弹:laytpl,官网:http://www.layui.com/laytpl/ 为了不用angularJS等较为重量级的,和繁琐的配置,所以就用了laytpl,可以配合JQ使用 ...

  6. [原创] 绿色单文件封装程序GreenOne V3.0

    1.原理 将包含可执行文件的多个文件 调用Winrar,创建自解压格式压缩文件 设置高级自解压选项中的文本和图标,设置解压后运行的文件为选中的可执行文件. 这种创建单文件封装其实也就是一个Winrar ...

  7. poj3160强连通分量加dfs

    After retirement as contestant from WHU ACM Team, flymouse volunteered to do the odds and ends such ...

  8. java.util.prefs.Preferences

    java.util.prefs.Preferences Preferences类是在JDK1.4中首次提供的,可以用它来存放应用程序的配置数据,这里对Preferences类做点介绍. 1.Prefe ...

  9. OC中自定义构造方法

    格式 -(instancetype)init(){ self=[super init] if(self){ } return self; } 自定义构造方法规范 1)一定是对象方法,以减号开头 2)返 ...

  10. Java并发,看到了,就记录下呗

    在这篇博客中,主要把之前看的书的内容记录一下,个人感觉还是可以的,原题是这样的:开发一个高效的缓存.这里指的是单机. 首先我来看当前的一个版本 public interface Computable& ...