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 ...
随机推荐
- 【bird-front】前端框架介绍
bird前端项目,基于react.antd.antd-admin,封装常用数据组件,细粒度权限解决方案. bird-front是基于react的后台管理系统前端项目,框架构建部分严重借鉴于antd管理 ...
- Oracle数据库(三)表操作,连接查询,分页
复制表 --复制表 create table new_table as select * from Product --复制表结构不要数据 在where后面跟一个不成立的条件,就会仅复制表的结构而不复 ...
- android studio 环境变量配置
1.需要添加path环境变量: 2.真机调试或模拟器调试需要启动adb adb kill-severadb -start-server可能有端口冲突--重启或者修改端口 创建密匙http://blog ...
- Intellij IDEA 像eclipse那样给maven添加依赖
打开pom.xml,在它里面使用快捷键:ALT+Insert ---->点击dependency 再输入想要添加的依赖关键字,比如:输个spring 出现下图: 根据需求选择版本,完成以后 ...
- C++ 头文件系列(iostream)
1. 简介 这个头文件非常特殊,它只声明了8个常用流对象. 2. 8个对象 2.1 窄字符对象(char) extern istream cin extern ostream cout extern ...
- bzoj 4013: [HNOI2015]实验比较
Description 小D 被邀请到实验室,做一个跟图片质量评价相关的主观实验.实验用到的图片集一共有 N 张图片,编号为 1 到 N.实验分若干轮进行,在每轮实验中,小 D会被要求观看某两张随机选 ...
- Spring_Spring与IoC_Bean的装配
一.Bean的装配 bean的装配,即Bean对象的创建,容器根据代码要求来创建Bean对象后再传递给代码的过程,称为Bean的装配. 二.默认装配方式 代码通过getBean()方式从容 ...
- 扩展1 - Python 获取当前时间的用法
1.先导入库:import datetime 2.获取当前日期和时间:now_time = datetime.datetime.now() 3.格式化成我们想要的日期:strftime() 比如:“2 ...
- 怎么选择公司???MVC加jquery-easyui 后端工程师
代码管理 Git 架构 MVC 这样的项目扩展性强,维护性强!!! 别很老的asp.net 不用框架!!!
- php array_walk
PHP array_walk() 函数 对数组中的每个元素应用用户自定义函数: <?php function myfunction($value,$key) { echo "The k ...