CSS的nth-of-type和nth-child的区别
<!--源代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: #ff11ff;
}
p{
width: 100px;
height: 100px;
background: blue;
}
/*div:nth-child(2n+1){*/
/*background: red;*/
/*}*/
div:nth-of-type(2n+1){
background: red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<p></p>
<div></div>
<div></div>
</body>
</html>
使用nth-child的效果图： 使用nth-of-type：效果
从上面可以看到：nth-child是从父元素的第一个子元素算起走，会算其他标签元素，而nth-of-type只会计算父元素下本标签元素
CSS的nth-of-type和nth-child的区别的更多相关文章
- AmazeUI(妹子UI)中CSS组件、JS插件、Web组件的区别
AmazeUI(妹子UI)是非常优秀的国产前端UI,现在来介绍一下AmazeUI中CSS组件.JS插件与Web组件的区别. CSS组件顾名思义就是仅使用CSS渲染而成的组件,而JS插件也很容易理解,就 ...
- 网站开发进阶(四十四)input type="submit" 和"button"的区别
网站开发进阶(四十四)input type="submit" 和"button"的区别 在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...
- amazeui中css组件、js组件、web组件的区别
amazeui中css组件.js组件.web组件的区别 一.总结 一句话总结: 1.可直接像调用js插件那样调用:在AmazeUI(妹子UI)中,Web组件可以不编写模板而直接使用,若如此,则与JS插 ...
- vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别
移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...
- <input type="image"> 和 <img> 用法区别
原文:<input type="image"> 和 <img> 用法区别 w3c定义如下: Image <input type="image ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- CSS 去掉IE10中type=password中的眼睛图标
在IE10中,input[type=password],如果我们输入内容后,内容会变成圆点,这与以前一样,但后面多了一个眼睛图标,我们鼠标移过去按下会出现输入内容.有时我们想去掉这功能.IE10允许我 ...
- css 选择器/table属性/type 属性
css style样式---要写单位px style=" width: 200px; height :300px;" ;是结束符
- css 能改变input type radio和checkbox 圆圈或方框的大小
把input隐藏,外面套label,再里面加个span,样式写在span上,让label覆盖在span上面,js去改active的class <label for="remember& ...
- css引入方式优先级以及不同选择器的优先级区别
我们都知道css有3种基本设置方式即 1.行内也叫嵌入式 例如: <div style='background:red'></div> 2.内联式,在html文件中用style ...
随机推荐
- Springboot-读取核心配置文件及自定义配置文件
读取核心配置文件 核心配置文件是指在resources根目录下的application.properties或application.yml配置文件,读取这两个配置文件的方法有两种,都比较简单. 核心 ...
- Openssl ec命令
一.简介 椭圆曲线密钥处理工具 二.语法 openssl ec [-inform PEM|DER] [-outform PEM|DER] [-in filename] [-out filename] ...
- 快速求出n!的质因数的个数
一般做组合数的题目都要进行质因数的分解,我们一般是for循环对每个数进行质因数分解,大多数情况都不会超时,但极少数的情况下,题目会不允许这样的做法,所以我们需要学会一种更快的方法来求质因数. 我们一般 ...
- Oracle VirtualBox 问题汇总
1.打开虚拟机时报硬盘UUID 已经存在:错误信息: Cannot register the hard disk 'F:\VirtualBox VMs\cl-11r2-rac2\cl-11r2-rac ...
- hdu Lovekey（水题）
#include<stdio.h> #include<string.h> ]; int main() { ],s2[]; int l1,l2,i,j,k; while(scan ...
- OSG图形设备接口GraphicsContext
1.图形设备与相机 在Camera类的成员函数中,setGraphicContext()函数的工作是设置相机对应的图形设备对象,换句话说,下面要介绍的GraphicsContext类就是图形设备对象的 ...
- Kubernetes (1.6) 中的存储类及其动态供给
原文地址:http://blog.fleeto.us/translation/dynamic-provisioning-and-storage-classes-kubernetes-0?utm_sou ...
- loadFileSystems error & ExceptionUtils错误原因分析
loadFileSystems error & ExceptionUtils错误原因分析 一见 2014/5/7 C/C++程序通过hdfs.h访问HDFS,运行时遇到如下错误,会是什么原因了 ...
- strerror线程安全分析
导读 strerror是否线程安全了? 1 errno是否线程安全? 1 附1:strerror源码 2 附2:__strerror_r源码 2 strerror是否线程安全了? 答案是NO,但它有个 ...
- 团体程序设计天梯赛L1-027 出租 2017-03-23 23:16 40人阅读 评论(0) 收藏
L1-027. 出租 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声, ...