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 ...
随机推荐
- JavaScript 中 this 的详解
this 的指向 this 是 js 中定义的关键字,它自动定义于每一个函数域内,但是它的指向却让人很迷惑.在实际应用中,this 的指向大致可以分为以下四种情况. 原文作者:林鑫,作者博客:http ...
- 后台返回数据事null时怎么进行判断
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
- InnoDB 逻辑存储结构
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/80 如果创建表时没有显示的定义主键,mysql会按如下方式创建主 ...
- 比较日期大小以及获取select选中的option的value
原生JavaScript如何获取select选中的value // 1. 拿到select对象 const selectObject = document.getElementById('test') ...
- C#的发展已经15年了 。。。历史发展
C#是微软公司在2000年6月发布的一种新的编程语言,主要由安德斯·海尔斯伯格(Anders Hejlsberg)主持开发,它是第一个面向组件的编程语言,其源码会编译成msil再运行.它借鉴了Delp ...
- Python图片爬虫
1.今天给大家介绍自己写的一个图片爬虫,说白了就是从网页自动上下载需要的图片 2.首先选取目标为:http://www.zhangzishi.cc/涨姿势这个网站如下图,我们的目标就是爬取该网站福利社 ...
- 【转】nginx提示:500 Internal Server Error错误的解决方法
本文转自:http://www.jb51.net/article/35675.htm 现在越来越多的站点开始用 Nginx ,("engine x") 是一个高性能的 HTTP 和 ...
- [编织消息框架][netty源码分析]13 ByteBuf 实现类CompositeByteBuf职责与实现
public class CompositeByteBuf extends AbstractReferenceCountedByteBuf implements Iterable<ByteBuf ...
- css scroll bug
滚动区域不能设置overflow var doc = $(document), win = $(window), h = $("#head"), b = $("#body ...
- VC6.0 突然打不开dsw 工程文件的解决方案
在vc编程中,经常遇到dsw工程文件无法打开,或者打开后看不到类和变量的问题.特别是把代码从一台电脑上copy到另一台电脑上以后,常常会碰到这种奇怪的问题.有时在编辑状态下也会发生成员变量或函数提示不 ...