CSS3中first-child、last-child、nth-child、nth-last-child
1.单独指定第一个子元素、最后一个子元素的样式
<style type="text/css">
li:first-child{
background:yellow;
}
li:last-child{
background:blue;
}
</style>
2.对指定序号的子元素使用样式
<style type="text/css">
li:nty-child(2){
background:yellow;
}//对第二个子元素设定背景色
li:nth-last-child(2){
background:blue;
}//对倒数第二个子元素设定背景色
</style>
3.对所有第偶数个子元素或者第奇数个子元素使用样式
<style type="text/css">
li:nth-child(odd){
background:yellow;
}
li:nth-child(even){
background:blue
}
</style>
CSS3中first-child、last-child、nth-child、nth-last-child的更多相关文章
- 不可不看!CSS3中三十一种选择器用法
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月,介绍了 30 种最常用的 CSS 选择器用法,多加了一种, ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- css3中的盒子模型
1.示例一 实现左右布局,左侧宽度200px,右侧自适配 代码如下: <!DOCTYPE html> <html lang="en"> <head&g ...
- img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS3中的动画功能(一)
css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...
- CSS3中的变形处理
在css3中,可以利用transform功能来实现文字或者图像的旋转.缩放.倾斜.移动这四种类型的变形处理. 旋转 旋转功能使用rotate方法参数中加入角度值,方向为顺时针旋转.示例清单如下: &l ...
随机推荐
- JSON Schema 校验实例
JSON Schema 简介 JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. ...
- 字符截取:cut,格式化输出:printf,字符截取:awk,文件或命令输出编辑:sed
cut 选项 文件名 -f 列号 提取第几列 -d 分隔符 指定分隔符把行分成多列 不能以空格为分隔符. [root@localhost ~]# cat testfile no. name sex s ...
- 'boost/iterator/iterator_adaptor.hpp' file not found之xcode生成时报错的解决方案
xcode生成rn(0.49.3)项目的时候出现“'boost/iterator/iterator_adaptor.hpp' file not found之xcode”报错. 原因: /Users/x ...
- date 命令详解
date - print or set the system date and time Display the current time in the given FORMAT, or set th ...
- css3特效样式库
直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...
- 关于模拟登陆微博(PC)
微博模拟登陆 1.基类对象的方法建立一个类__init__初始化方法,接收username和password. class launcher(): def __init__(self, usernam ...
- JQ 为未来元素添加事件处理器—事件委托
随着DOM结构的复杂化和Ajax等动态脚本技术的运用,有了较多的动态添加进来的元素,直接用JQ添加click事件会发现新添加进来的元素并不能直接选取到,在这里就需要用到事件委托方法,JQ为事件委托提供 ...
- Git详解之五:分布式Git
为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git 来组织 ...
- java 类方法和实例方法 以及 类变量和实例变量
类体中的方法分为实例方法和类方法两种,用static修饰的是类方法 类方法: 对于类中的类方法,在该类被加载到内存时,就分配了相应的入口地址.从而类方法不仅可以被类创建的任何对象调用执行,也可以直接通 ...
- python2中的__init__.py文件的作用
python2中的__init__.py文件的作用: 1.python的每个模块的包中,都必须有一个__init__.py文件,有了这个文件,我们才能导入这个目录下的module. 2.__init_ ...