nth-child | 易学教程

关于casperjs调换窗口，引用jquery和step栈！

阅读更多关于关于casperjs调换窗口，引用jquery和step栈！

首先，调换窗口用withPopup方法，调用了此方法后执行环境在这个step中暂时换到了新建的窗口，但是，在这个step执行结束，进行下一个step时，环境会自动转换到之前的环境中。代码实例如下：对了，也可以直接用js语句对DOM进行操作，去掉target=”_blank”属性就可以了，这样也可以，但是并没有实现跳转窗口，而是让窗口不跳转，直接在元窗口上显示参考这篇文章用js操作DOM实现网站： http://www.biqukan.com/ 当然，withPopup方法的参数去看官方文档 var casper = require ( "casper" ).create({ pageSettings:{ userAgent: "Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0" , loadImages: false } }); phantom.outputEncoding = "gbk" ; casper.start( "http://www.biqukan.com/" , function () { this .capture( "D:/图片/首页.jpg" ); this .click( "div.item:nth-child(1) > div:nth-child

CSS3选择器笔记

阅读更多关于 CSS3选择器笔记

1.属性选择器： [id=test] {…} 选择id=test字符串的元素 [id*=test] {…} 选择id存在test字符串的元素 [id^=test] {…} 选择id 以test字符串开头的元素 [id$=test] {…} 选择id以test结尾的元素 2.伪类选择器、伪元素： p:first-line{…} 选择p元素中第一行的文字元素 p:first-letter{…} 选择p元素中的第一个文字元素 p:before{content:’…’} 选择p元素，在它之前插入一些内容 p:after{content:’…’} 选择p元素，在它之后插入一些内容 3.选择器root、not、empty、和target :root{background: red;} 设置html文档的背景色 :not(p){…} 设置非p元素的背景色 :empty{…} 设置当元素内容为空时指定的样式 :target{…} 设置跳转到target元素的样式 4.选择器first-child、last-child、nth-child、和nth-last-child li:first-child{…} 选择父元素中第一个子元素 li:last-child{…} 选择父元素中最后一个子元素 li:nth-child(2){…} 选择父元素第2个元素 li:nth-child(4n+4){…}

CSS3景深-perspective

阅读更多关于 CSS3景深-perspective

3D视图正方体： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3景深-perspective</title> 6 </head> 7 <style> 8 #div1{ 9 position: relative; 10 width: 500px; 11 height: 500px; 12 perspective: 1000px; /* 景深面的 (宽+高)*2 */ 13 background-color: #123456; 14 } 15 #div1 ul{ 16 transform-origin: 50% 50%; /* 旋转中心 */ 17 position: absolute; 18 left: 50%; 19 top: 50%; 20 width: 250px; 21 height: 250px; 22 transform-style: preserve-3d; /* 设置3D属性让子元素三维空间呈现 */ 23 list-style: none; 24 margin: -125px 0 0 -125px; 25 padding: 0; 26 font-size: 120px; 27 animation: move 6s linear infinite

炫酷CSS3垂直时间轴特效

阅读更多关于炫酷CSS3垂直时间轴特效

<!DOCTYPE html> <html lang = "en" > <head> <meta charset = "UTF-8" > <meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <meta http-equiv = "X-UA-Compatible" content = "ie=edge" > <link href = "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" > <title> Document </title> <style> . main - timeline { overflow : hidden ; position : relative ; } . main - timeline . timeline { position : relative ; margin - top : - 79px ; } . main - timeline . timeline : first - child { margin - top : 0 ; } . main - timeline . timeline : before , . main -

从零开始学习前端开发 — 11、CSS3选择器

阅读更多关于从零开始学习前端开发 — 11、CSS3选择器

一、基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二、层次选择器（关系选择器） 1.后代选择器语法： E F eg: .box a{color:red;}　　匹配.box中所有的子元素a 2.子代选择器语法： E>F eg: .box>a{color:red;}　　匹配.box中第一级子元素a 3.相邻兄弟选择器语法： E F eg: .box h3{background:pink;}　　匹配.box后面紧邻的那一个h3元素注：相邻兄弟选择器能匹配到的元素有且仅有一个，并且是E元素后面紧邻的F元素 4.通用兄弟选择器语法： E~F eg: .box~h3{border:2px solid blue;}　　匹配.box后面所有兄弟元素h3 注：通用兄弟选择器可以匹配到多个其后的兄弟元素三、动态伪类选择器 1.E:link 链接没有被访问过时的状态 2.E:visited 链接访问过后的状态 3.E:hover 鼠标滑过时的状态 4.E:active 鼠标按下时的状态（爱恨原则： L o V e HA te） 5.E:focus 当获取到焦点时的状态 eg: input:focus{border:2px solid red;} 当获取焦点时

css之弹性盒模型

阅读更多关于 css之弹性盒模型

　　弹性盒子（Flexible Box/filebox）是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。　　弹性盒子由弹性容器（父元素）和弹性子元素（可以一个或者多个）组合而成。弹性容器通过设置display属性的值为flex或者是inline-flex将其定义为弹性容器。一、display:flex　　　　　作用：让当前元素形成盒，控制子元素。　　　　特点：弹性盒里的子元素，都是沿着主轴排列，默认情况下，主轴为X轴。弹性盒里的子元素都能直接添加宽高（不用在乎是块元素还是行内元素）。让弹性盒里的一个子元素左右上下居中，直接给子元素添加margin:auto ;就可。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section{ display: flex; } span{ width: 100px; height: 100px; background-color: green; margin: auto; } </style> </head> <body> <section> <span><

导出ERP本月的考勤记录

阅读更多关于导出ERP本月的考勤记录

1 from selenium import webdriver 2 from selenium.webdriver.common.by import By 3 import time 4 5 time_start=time.time() 6 7 8 #default setting of firefox 9 import os 10 fp = webdriver.FirefoxProfile() 11 fp.set_preference("browser.download.folderList",0)#0代表下载到浏览器默认下载路径 12 fp.set_preference("browser.download.manager.showhenStarting",False) 13 fp.set_preference("browser.download.dir",os.getcwd()) 14 fp.set_preference("browser.helperApps.neverAsk.saveToDisk","application/vnd.ms-excel")#下载文件类型 15 16 17 driver = webdriver.Firefox(firefox_profile = fp) 18 19 20 #login 21 driver.get('http://xxxxxxxx

css选择器

阅读更多关于 css选择器

参考css权威指南类选择器，ID选择器 .warning.urgent #firstp-para 属性选择器简单的属性选择器包含class属性的h1标签 h1[class]{color:red;} <h1 class="hoopla"> hello </h1> √ <h1> Sernity </h1> <h1 class="fancy"> Fooling </h1> √ 根据精准的属性值 a[href="http://www.css-discuss.org/about.html"]{ font-weight:bold;} 根据部分属性值选择形式说明 [foo|="bar"] 以bar-开头，或者 foo="bar" [foo~="bar"] 匹配以空格分隔的词组，如 warn bar success [foo*="bar"] %bar% ,如 aabarcc [foo^="bar"] 以bar开头 [foo$="bar"] 以bar结尾 [foo|="bar"],前三个被选中 <h1 class="en"></h1> √ <h1 class="en-us"></h1> √ <h1 class="en-au"></h1> √ <h1 class="cy-en"></h1> × 使用场景：插图文件名为: figure-1.gif,figure-2.gif 等 img[src|

nth选择器的使用

阅读更多关于 nth选择器的使用

转载请注明出处 code 含义 :nth-child(n) 选中某个元素，该元素必须是某个父元素下的第n个子元素 p:nth-child(n) 选中p元素，且该p元素必须是某个父元素下的第n个子元素注意：n 是从 1 开始的, 如下代码: p:nth-child(1) ，只会选中第二个div中第一个子元素p; 不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素 <style> p:nth-child(1){ color:red } </style> <div style="border:1px solid"> <span>div span中第一个段落。</span> <p>div 中第一个段落。</p> <p>div 中的最后一个段落。</p> </div><br> <div style="border:1px solid"> <p>另一个 div 中第一个段落。</p> <p>另一个 div 中的最后一个段落。</p> </div> 正方向范围 li:nth-child(n+6) 选中从第6个开始的子元素负方向范围 :nth-child(-n+9) 选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素前后限制范围 :nth-child(n+4):nth-child(-n+8) 选中第4

伪类选择器

阅读更多关于伪类选择器

1、:hover 　　鼠标悬停在标签上方时触发hover样式，适用于所有标签 2、:active 　　鼠标点击标签未松开时触发active样式，适用于所有标签 3、:checked 　　当标签被选中时触发checked样式，适用于radio(单选按钮)，checkbox(复选框)，或者option(select中的一项) 4、:focus 　　当标签获得焦点时触发focus样式，适用于input、button 5、:focus-within 　　当标签获得焦点或该标签的后代标签获得焦点时触发此样式，适用于后代标签是input标签、button标签的标签 6、::placeholder 　　设置占位符中字体的样式　　iuput::placeholder{ 　　　　font-size:14px 　　} 7、:first-child 　　表示在一组兄弟标签中的第一个标签　　:first-child 　　表示在一组兄弟标签中的最后一个标签　　例如：　　div p:first-child{ 　　　　color: red; 　　} 　　div p:first-child{ 　　　　color: blue; 　　} <div> 　　<p>1111111</p> 　　<p>2222222</p> 　　<p>3333333</p> 　　<p>4444444</p> 　　<p>5555555

订阅 nth-child