• 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. Unity加载场景、计时器、加载时不销毁某物体

    异步加载场景,SceneManager.LoadSceneAsync(SceneName);需引用 using UnityEngine.SceneManagement;命名空间, Applicatio ...

  2. 带你玩转 jQuery

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...

  3. Xamarin.Android 绑定友盟社会化分享组件

    Xamarin.Android 绑定友盟社会化分享组件 最近在开发博客园Android App的时候需要用到友盟社会化分享组件,在github上搜了一下都没有找到最新版本绑定好的项目,就自己动手来绑定 ...

  4. js小数处理

    js中的小数处理   先说说Math的几个方法: 1.Math.floor(x)   返回不大于当前数的最大整数. 我的记法:floor 直译 地板  也就是不大于的的意思 (x-0.5 四舍五入取整 ...

  5. 蓝桥杯-李白打酒-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. Unity 多屏(分屏)显示,Muti_Display

    Unity 多屏(分屏)显示,Muti_Display  最近项目有个需求,主要用于在展厅的展示游戏. 比如,在一个很大的展厅,很大的显示屏挂在墙上,我们不可能通过操作墙上那块显示器上的按钮来控制游戏 ...

  7. Android库的标准化(不断更新中)

    在Android的开发过程中,为了代码的通用性,模块化等原因,应该尽量将功能独立的,通用性高的模块抽离出来,建立单独的库.各个库的功能不同,但是同样作为库,依然有很多相通的地方. 各个库应该都应该遵循 ...

  8. TPshop手机新模板的用户消息实现

    今天在开发TPshop的手机新模板的消息页面,姑且记录一下. 首先,点击下方右上角,进入消息页面: 数据库中目前模拟了三条数据,有: 点击上图右上角,有: 这个 消息设置 功能是新增的,而且类型由原本 ...

  9. 玩一玩nodejs--一个简单的在线实时填表应用

    学习nodejs三天,入了个门,感觉他和jsp.php还是存在较大的差别.本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点.这里先简单介 ...

  10. Python冒泡算法和修改配置文件

    先学习之前未完成的冒泡算法 li = [13,22,6,99,11] 从小到大 从第一个数字比较把大的往后移位 for m in range(4): num1 = li[m] num2 = li[m+ ...