nth-child | 易学教程

奥运五环

阅读更多关于奥运五环

<!DOCTYPE　 html> <html> 　　<head> 　　　　　<meta charset="UTF-8"> 　　　　　<title>奥运五环</title> 　　　　　<style type="text/css"> 　　　　　　　　div:first-child{ 　　　　　　　　　　color:steelblue; 　　　　　　　　} 　　　　　　　　div:nth-child(2){ 　　　　　　　　　　clolo:black; 　　　　　　　　} 　　　　　　　　div:nth-child(3){ 　　　　　　　　　　clolo:red; 　　　　　　　　} 　　　　　　　　div:nth-child(4){ 　　　　　　　　　　clolo:yellow; 　　　　　　　　　　transform: translateX:(240px) translateY(-250px); 　　　　　　　　} 　　　　　　　　div:nth-child(5){ 　　　　　　　　　　clolo:green; 　　　　　　　　　　transform: translateX:(240px) translateY(-250px); 　　　　　　　　} 　　　　　</style> 　　</head> 　　<body> 　　　　　<div> 　　　　　　　北　　　　　</div>　　　

JQ选择器

阅读更多关于 JQ选择器

1.#id 查找ID 为myDIV的元素 <body> <div class="mydiv"><p> I am little D!</p></div> <div class="opl"> <p>小弟</p> </div> <script src="../js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> console.log($(".mydiv")); </script> </body> 2.element 用于搜索的元素指向DOM节点的标签名 <body> <div>div</div> <div>div2</div> <span>span</span> <script src="../js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> console.log($("div")); </script> </body> 3. .class 获取类 <div class="notMe">div class="notMe"</div> <div class="myClass">div class="myClass"</div> <span class="myClass">span class="myClass"</span>

nth-of-type和nth-child

阅读更多关于 nth-of-type和nth-child

一、nth-of-type、nth-child :nth-of-type( n ) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。 :nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。二、区别 1.用于元素节点 E:nth-of-type(n) E元素的父元素的子元素中第n个E元素匹配(不一定是E元素的父元素的第n个子元素) E:nth-child(n) E元素的父元素的第n个子元素且是E元素才匹配 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title></title> <style> p { color:blue; } p:nth-of-type(1){ background-color:red; } h1:nth-of-type(1){ background-color: yellow; } /*p:nth-child(1){*

CSS3 :nth-child() 选择器

阅读更多关于 CSS3 :nth-child() 选择器

实例规定属于其父元素的第二个子元素的每个 p 的背景色： p:nth-child(2) { background:#ff0000; } 亲自试一试浏览器支持 IE Firefox Chrome Safari Opera 所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。定义和用法 :nth-child( n ) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。提示：请参阅 :nth-of-type() 选择器，该选择器选取父元素的第 N 个指定类型的子元素。亲自试一试 - 实例实例 1 Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。在这里，我们为奇数和偶数 p 元素指定两种不同的背景色： p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { background:#0000ff; } 亲自试一试实例 2 使用公式 ( an + b )。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色： p:nth-child(3n+0) { background:#ff0000; } 来源： https:/

css选择器总结

阅读更多关于 css选择器总结

CSS1选择器选择器解释说明 E 类型选择器选择指定类型的元素(指定标签) E#myid ID选择器 id等于myid的E元素,E若省略则表示id等于myid的任意元素 E.class 类选择器所有class等于指定class的E元素.若E省略E的用处同上 E F 包含选择器选择包含在E元素中的F元素.E和F可以是其它选择器,如:E.abc F.cde a:link 链接伪类匹配已定义了href属性的a元素 a:visited 链接伪类匹配已访问过的a元素 E:active 用户操作伪类选择被激过的E元素,如被鼠标按住 E:hover 用户操作伪类正被鼠标经过的E元素 E:focus 伪选择器匹配获得焦点的E元素 E::first-line 伪选择器 E元素内的第一行文本 E::first-letter 伪选择器匹配E元素内的第一个字符 CSS2选择器选择器解释说明 * 通配选择器选择文档中所有的元素 E[foo] 属性选择器匹配E元素,且它定义了foo属性,若E省略,则表示所有定义了foo属性的任意元素 E[foo=”bar”] 属性选择器匹配E元素,且它定义了foo属性,且值是bar,E省略的情况同上 E[foo~=”bar”] 属性选择器匹配E元素,且它的foo属性中有bar,如:<a title=”bar bar1 bar2”></a

深入理解css3中 nth-child 和 nth-of-type 的区别

阅读更多关于深入理解css3中 nth-child 和 nth-of-type 的区别

在css3中有两个新的选择器可以选择父元素下对应的子元素，一个是:nth-child 另一个是:nth-of-type。但是它们到底有什么区别呢？其实区别很简单：:nth-of-type为什么要叫:nth-of-type？因为它是以"type"来区分的。也就是说：ele:nth-of-type(n)是指父元素下第n个ele元素，而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。文字未免听起来比较晦涩，便于理解，这里附上一个小例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> </head> <style> .demo li:nth-child(2) { color: #ff0000; } .demo li:nth-of-type(2) { color: #00ff00; } </style> <body> <div> <ul class="demo"> <p>zero</p> <li>one</li> <li>two</li> </ul> </div> </body> </html> 结果如下：上面这个例子，.demo li:nth-child(2)选择的是<li>one</li>节点，而.demo li

CSS--2D和3D效果

阅读更多关于 CSS--2D和3D效果

2D变形转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。变形转换 transform 移动 translate(x, y) translate ( 50px,50px ) ; 使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。可以改变元素的位置，x、y可为负值； translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动） .box { width : 499.9999px ; height : 400px ; background : pink ; position : absolute ; left : 50% ; top : 50% ; transform : translate ( -50%,-50% ) ; /* 走的自己的一半 */ } 让定位的盒子水平居中缩放 scale(x, y) transform : scale ( 0.8,1 ) ; 可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。 scale(X,Y

CSS笔记（CSS简介，选择器，层叠抉择）

阅读更多关于 CSS笔记（CSS简介，选择器，层叠抉择）

CSS 指的是层叠式样式表（cascading style sheet），就像超文本标记语言一样，在字面上理解CSS，它就是一个管HTML样式的，而“ 层叠式 ”的意思是：一个元素的样式可以有多个(可以继承父类元素)，当进行抉择定义样式时，就得通过特定性数以及规则顺序来决定了。注： CSS包含的一些简单语句称为规则有些CSS属性是无法被继承的，如边框同样的，这里有个检验网站用于检验编写的CSS文件是否正确 1 选择器 CSS允许你指定各种选择器来确定将样式应用到哪些元素上，以下举出几种选择： 1.1 元素选择器 p { color:yellow; } 1.2 筛选选择器筛选选择器如 .classname_a.classname_b ，能具体表明想要定义的部分，注意 .classname_a 与 .classname_b 是在同一阶层 elementname.classname { color:yellow; } 1.3 ID选择器由于ID就只有一个，所以 IDname 并不需要添加元素前缀，不过需要添加 # 号 #IDname { color:yellow; } 1.4 综合选择器使用 , 号连接表示叠加关系 #IDname,h1,classname { color:yellow } 1.5 子孙选择器用空格连接表示继承关系 classname p {

jQuery温习篇---强大的JQuery选择器

阅读更多关于 jQuery温习篇---强大的JQuery选择器

学习 jQuery 已经有 1 年多的时间了，但是一直由于做 WinForm 程序开发没有经常实践。现在又开始重拾 WebForm 开发。写几篇 jQuery 系列，温习下 jQuery 框架的知识。在 jQuery 出世以来，它取得很大的成就和认同。 JQuery 是一个轻量级的 JavaScript 框架，它的发布版很小仅 16K 左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果，轻松的处理 JavaScript 的 DOM 数以及 Ajax 的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的 jQuery 插件使用。由于它这一大堆的优点，它已经被微软官方认可加入 VS IDE 中拥有强大的智能提示，并据官方的统计现在至少有 20% 的国际性大网站已经加入 jQuery 作为其脚本。 1 ：首先是 JavaScript 的 DOM 和 jQuery 包装集的区分 1.1: 在 JavaScript 中我们访问的方式是操作 DOM 结构 , 提供的可用方法有： 1: document.getElementById("ID") ：根据 ID 获取 DOM 对象。 2 ： document.getElementsByName("name") ：根据 HTML 标记 name 属性获取一个 DOM 数组。 3 ： document

css3实现转轴展开照片列表

阅读更多关于 css3实现转轴展开照片列表

* { margin : 0 ; padding : 0 ; } ul { list - style : none ; } . wrap { width : 100 vw ; height : 100 vh ; background - color : black ; display : flex ; /* x轴居中 */ justify - content : center ; /* y居中 */ align - items : center ; } . wrap ul { width : 80 % ; height : 80 % ; /* background-color: white; */ /* border: 1px solid white; */ /* 弹性盒模型 */ display : flex ; /* 两端对齐 */ justify - content : space - between ; align - items : center ; } . wrap li { width : 16 % ; height : 100 % ; background : # 333 ; border - radius : 20 px ; overflow : hidden ; transition : width 0.5 s linear , height 0.5 s

订阅 nth-child