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 ...
随机推荐
- 浅谈Java中set.map.List的区别
就学习经验,浅谈Java中的Set,List,Map的区别,对JAVA的集合的理解是想对于数组: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型),JAVA集合可以存储和操 ...
- ubuntu下搭建android开发环境
注意: google可能被和谐了,那就修改hosts sudo vim /etc/hosts 增加: #Google主页 203.208.46.146 www.google.com #这行是为了方便打 ...
- 给初学者的总结：jquery选择器
刚学jquery的时候是又渣又蠢的小白,而且把js和jquery混淆在一起. 把jquery的全部选择器总结在一起,才发现和css选择器好一部分都很像,并且有些选择器还很少用过. 我学习前端的路程是先 ...
- Windows下搭建JSP开发环境
1. 配置说明: => 编辑器: Eclipse (Java EE IDE) => 数据库: MySQL (MySQL Workbench 进行数据库管理, 用 MySQL Connect ...
- css确定取消 悬浮底部样式 和 金额 后缀
.blockquote-bottom { width: 100%; position: fixed; margin: 0; bottom: 0; left: 0; text-align: center ...
- IDEA设置与快捷键记录
一:代码提示大小写设置 二:设置代码检查等级 IntelliJ IDEA 对于编辑大文件并没有太大优势,很卡,原因就是它有各种检查,这样是非常耗内存和 CPU 的,所以为了能加快大文件的读写,我一般会 ...
- Actor模型文章收集
参与者模式——维基百科 Akka.Net——github开源项目 Actor原理——比较深入的文章
- QGIS与Python
Qgis python开发教程(一):https://blog.csdn.net/u011435933/article/details/80419496
- Alpha冲刺（五）
Information: 队名:彳艮彳亍团队 组长博客:戳我进入 作业博客:班级博客本次作业的链接 Details: 组员1 柯奇豪 过去两天完成了哪些任务 基于ssm框架的前后端交互测试,结合微信小 ...
- Android dex分包方案和热补丁原理
一.分包的原因: 当一个app的功能越来越复杂,代码量越来越多,也许有一天便会突然遇到下列现象: 1. 生成的apk在2.3以前的机器无法安装,提示INSTALL_FAILED_DEXOPT 2. 方 ...