CSS3中nth-of-type和nth-last-of-type
1.使用nth-child和nth-last-child时会产生的问题
在使用nth-child和nth-last-child时,其计算子元素是奇数个元素还是第偶数个元素时,是连同父元素中的所有子元素一起计算的。
当父元素是列表时,列表中只可能有列表项目一种子元素,所以不会出问题,但是当父元素是div时,div包含多种子元素,会出现问题。
2.使用nth-of-type和nth-last-of-type
<style type="text/css">
h2:nth-of-type(odd){
background:yellow;
}
h2:nth-of-type(even){
background:blue;
}
</style>
//只计算h2元素的,而不会包含和h2同级别的其他元素
CSS3中nth-of-type和nth-last-of-type的更多相关文章
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- CSS和CSS3中的伪元素和伪类(总结)
好多人伪类和伪元素分清楚,其实就是一句话,“伪类的效果可以通过添加一个实际的类来达到,而伪元素的效果则需要通过添加一个实际的元素才能达到”. CSS中伪类包括: :first-child :lang ...
- img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover
img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover <!DOCTYPE html> <html ...
- css3中transition和animation的回调处理
弱鸡最近在准备面试,网上找了一些题,发现一些基础题也完全答不好(┬_┬)看来还是要再接再励啊w(゚Д゚)w 言归正传,今天的主题是CSS3中的动画回调处理,这里动画执行完毕后触发的事件是transit ...
- css3中变形与动画(三)
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- html5 css3中的一些笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...
- css3 中的transition和transform
我以前始终都把他搞反,或者是混淆.现在可以稍微小结下. Transition:CSS3中处理动画的一个样式:只涉及动画起始和终止两个状态.如果涉及到一个动画的各个时间或者状态,那就必须要用到的另外一个 ...
- CSS3中媒体查询,更换样式表
<link rel="stylesheet" href="css/1.css" media="(min- width:600px)"& ...
- 初识 css3中counter属性
最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...
- 媒体查询的应用以及在css3中的变革
CSS一直都支持设置与媒体相关联的样式表.它们可以适应不同媒体类型的显示.例如,文档在屏幕显示时使用sans-serif字体,在打印时则使用serif字体.screen和print是两种预定义的媒体类 ...
随机推荐
- Spark配置参数优先级
1.Properties set directly on the SparkConf take highest precedence, 2.then flags passed to spark-sub ...
- 【java】HashMap、Map、Set、HashMap.put()、HashMap.keySet()、HashMap.entrySet()、Map.Entry内部类
package com.tn.hashMap; public class Student { private String id; private String name; public Studen ...
- windows server 2008 R2服务器安装IIS并添加网站
一.连接远程计算机 1.因为我的电脑是win7系统,故这里以win7为例,其他windows系统大同小异,首先点开开始菜单栏,在windows附件下找到远程桌面连接 或者采用通用的方法,利用快捷键wi ...
- Spring入门篇总结:
本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 视频传送门:Spring入门篇 该门课程主要从Spring的Bean ...
- form表单与后台请求的关系
开发中遇到一个问题,说这个问题前先看一下代码 后台方面, get请求: post请求: 前端方面: 问题是:当我点击提交表单后,页面会跳转成这样: 经过多番测试,原因竟是form表单的提交问题,如果用 ...
- 手撕vue-cli配置文件——config篇
最近一直在研究webpack,突然想看看vue-cli中的webpack是如何配置,查阅了很多相关的文章,所以也想出几篇关于vue-cli配置的东西.正所谓"工欲善其事必先利其器" ...
- 安装MySQL时提示3306端口已被占用的解决方案
之前安装过mysql,用的好好的,但是今天开启服务时报异常,无法启动.为省事,于是想到卸载重装,安装过程中发现3306已经被占用,这也是一开始服务无法启动的原因. 看到有人说用fport查看端口号,于 ...
- 找回Git中丢失的Commit
在使用Git的过程中,有时候会因为一些误操作,比如reset.rebase.merge等.特别是在Commit之后又执行了git reset --hard HEAD强制回滚本地记录以及文件到服务器版本 ...
- 宇宙探索特工队&scrum
对scrum的一些理解 Scrum是一种迭代式增量软件开发过程,通常用于敏捷软件开发.Scrum包括了一系列实践和预定义角色的过程骨架.Scrum中的主要角色包括同项目经理类似的Scrum主管角色负责 ...
- 通过 python的 __call__ 函数与元类 实现单例模式
简单一句话,当一个类实现__call__方法时,这个类的实例就会变成可调用对象. 直接上测试代码 class ClassA: def __call__(self, *args, **kwargs): ...