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 ...
随机推荐
- Convert Sorted Array to Binary Search Tree数组变成高度平衡的二叉树
［抄题］: Given an array where elements are sorted in ascending order, convert it to a height balanced B ...
- cactiez中文版10.1配置监控系统安装笔记
1.安装虚拟机vmware_player2.创建虚拟机,设置桥接模式,内存4g,磁盘大小50G3.启动虚拟机,安装系统4.系统root 默认密码 CactiEZ5.配置网络静态IP,修改IP,网关等信 ...
- 面向对象的JavaScript-007-Function.prototype.bind() 的4种作用
1. // Function.prototype.bind() 的作用 // 1.Creating a bound function this.x = 9; var module = { x: 81, ...
- JMS 之 Active MQ 的消息传输
本文使用Active MQ5.6 一.消息协商器(Message Broker) broke:消息的交换器,就是对消息进行管理的容器.ActiveMQ 可以创建多个 Broker,客户端与Active ...
- 在Linux下配置.net网站
一.Linux安装 1.1 Linux环境 本篇文章选择VMWare虚拟机安装Linux,使用的Linux是CentOS-7.可以在百度上自行下载一个VMWare和CentOS-7镜像,建议使用最新版 ...
- 一个新手后端需要了解的前端核心知识点之position（一）
以下内容是基于观看慕课网视频教程总结的知识点,边打代码边总结,符合自己的思维习惯.不是针对新手入门 我做程序的初衷是想做一个网站出来.HTML语言当然重要啊,缺什么就百度什么,很浪费时间,还是好好的打 ...
- JDK1.6 1.7 1.8 多版本windows安装 执行命令java -version 版本不变的问题
现在Windows的java安装已经没有解压版本,Oracle官方也不会再提供了,只有安装程序 所以每当安装一次JDK,都会将 java.exe.javaw.exe.javaws.exe三个可执行文件 ...
- Web测试实践--Rec 4
累计完成任务情况: 阶段内容 参与人 整理小组工作记录,维护小组博客 小尹 分析产品并撰写文档相关板块 小靳 撰写文档中对被测系统进行功能性分析相关板块 小龙.小黄 撰写文档中用户调研相关板块 小熊 ...
- 03 Complementing a Strand of DNA
Problem In DNA strings, symbols 'A' and 'T' are complements of each other, as are 'C' and 'G'. The r ...
- [GO]百度贴吧的爬虫
package main import ( "fmt" "strconv" "net/http" "os" " ...