nth-child | 易学教程

CSS选择器之:nth-child()和:nth-of-type()的使用

阅读更多关于 CSS选择器之:nth-child()和:nth-of-type()的使用

今天就讲一下css选择器:nth-child()和:nth-of-type()的使用。一、:nth-child()和:nth-of-type()的支持度所有主流浏览器均支持:nth-child()和:nth-of-type()选择器，除了 IE8 及更早的版本。二、:nth-child()和:nth-of-type()的一般使用方法 1、:nth-child(x); 选择第x的元素 2、:nth-child(x*n) x的n倍元素 3、:nth-child(n+x); 选择 =>x 的元素 4、:nth-child(-n+x) 选择 =< x 的元素 5、:nth-child(n x+1); n x-1 隔开n*x选取一个 6、nth-child(odd)/nth-child(even) 奇数偶数使用的时候请把《*》删除三、:nth-child()和:nth-of-type()的一些不同之处 :nth-child()—–》混合型跳过模式：这个是我自己取得名字。意思就是说同一个父级下如果我们选择了第二个元素p:nth-child(2)。但是第二个元素不是p标签而是其他的标签，那么选择的标签不成立，选择不了。代码如下： <div id="a1"> <p>CGLweb前端</p> <div>CGLweb前端</div> <p>CGLweb前端</p> </div>

css3动画-加载中...

阅读更多关于 css3动画-加载中...

写几个简单的加载中动画吧。像前面三种都是相当于几个不同的点轮流来播放同一动画：变大变小。css3里面有一个用于尺度变换的方法： scale( x , y ) ：定义 2D 缩放转换，改变元素的宽度和高度。第四种就是一个小球从上往下跌落，再弹回去，在上面的时候速度最小，下面的时候速度最大。由于该小球只进行了上下的移动，所以我们可以运用： translateY( n )：定义 2D 转换，沿着 Y 轴移动元素，从而实现小球沿Y方向来回移动。废话不多说了，上代码。首先，第一个加载中的动画： 1 < div id ="loading1" > 2 < div class ="demo1" ></ div > 3 < div class ="demo1" ></ div > 4 < div class ="demo1" ></ div > 5 < div class ="demo1" ></ div > 6 < div class ="demo1" ></ div > 7 </ div > html Code 1 .demo1 { 2 width : 4px ; 3 height : 4px ; 4 border-radius : 2px ; 5 background : #68b2ce ; 6 float : left ; 7 margin : 0 3px ; 8

CSS基础(2)

阅读更多关于 CSS基础(2)

1.结构伪类选择器 span:first-child 选择span元素的父元素中的第一个子元素,第一个子元素还必须得是span标签 span:last-child 选择span元素的父元素中的最后一个子元素,最后一个子元素还必须得是span标签 span:nth-child(n) 选择span元素的父元素中的第n个子元素,第n个子元素还必须得是span标签注意是从前面开始查找 span:nth-last-child(n) 选择span元素的父元素中的第n个子元素,第n个子元素还必须得是span标签注意是从后面开始查找凡是涉及到n的操作,n的取值都可以从0开始,可以取0,1,2,3,4,5,6,7,8,9... span:nth-child(2n) 原理同上,是取偶数行 span:nth-child(2n+1) 原理同上,是取奇数行 span:nth-child(even) 原理同上,是取偶数行 span:nth-child(odd) 原理同上,是取奇数行 2.目标伪类选择器 :target 获取被选中的那个元素 3.盒子模型在网页布局当中为了页面的稳定，美观，以及维护的方便，我们是将每一个标签都看成是一个盒子模型所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border

# [Python3爬虫] 爬取用户信息和全部微博（pyquery+selenium+mongodb ）

阅读更多关于 # [Python3爬虫] 爬取用户信息和全部微博（pyquery+selenium+mongodb ）

[Python3爬虫] 爬取用户信息和全部微博（pyquery+selenium+mongodb ）微博爬虫爬取手机版微博会比较简单，而手机版里面微博彩板标准版比较适合爬取。需要代理IP和代理账号，IP代理最好不要使用免费的，例如西刺，免费代理多数挂的快，不稳定而且速度慢，速度慢就无法再超时设置的规定时间内加载出网页，导致出现异常，程序终止微博账号购买： http://www.xiaohao.fun/或者http://www.xiaohao.live/ IP代理商： http://h.zhimaruanjian.com/getapi/#obtain_ip 数据存入MongoDB中，确保MongoDB已安装并且可以连接成功主要步骤：测试代理ip 模拟登陆获取用户基本信息获取用户所有微博测试代理IP proxy = "http://58.218.200.248:3178"#设置代理IP # 测试代理IP def check_ip(): print(r'正在检查代理IP是否可用...') # 测试ip是否可用 proxies = { 'http': proxy, 'https': proxy, } print('当前测试的代理IP为：' + proxy) print('...') print('测试结果：') try: r = requests.get('http:/

3D电子相册

阅读更多关于 3D电子相册

3D魔幻旋转相册特效：发牌动画效果、定时旋转效果 <!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"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ background: #000; } .wrap{ width: 150px; height: 150px; /* border: 1px solid green; */ margin: 150px auto; perspective: 2000px; } .wrap>.imgList{ height: 100%; position: relative; transform-style: preserve-3d; } .imgList>img{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-shadow: 0 0 8px 0 #eee; }

CSS中选择器

阅读更多关于 CSS中选择器

CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。选择器语法 CSS 选择符： 1，基本选择器语法选择器类型功能描述 * 通配选择器选择文档中所以HTML元素 E 元素选择器选择指定类型的HTML元素 #id ID选择器选择指定ID属性值为“id”的任意类型元素 .class 类选择器选择指定class属性值为“class”的任意类型的任意多个元素 selector1,selectorN 群组选择器将每一个选择器匹配的元素集合并 2，层次选择器语法选择器类型功能描述 E F 后代选择器（包含选择器）选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 E>F 子选择器选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素 E+F 相邻兄弟选择器选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 E~F 通用选择器选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 3，动态伪类选择器语法选择器类型功能描述 E:link 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 E:visited 链接伪类选择器选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 E:active 用户行为选择器选择匹配的E元素，且匹配元素被激活

上拉加载底部转圈圈动画并文字提示

阅读更多关于上拉加载底部转圈圈动画并文字提示

<block> <view class="listFooterLoading" wx:if="{{loadStatus==1}}">  <view class="m-load2"> <view class="line"><view></view><view></view><view></view><view></view><view></view><view></view></view> <view class="circlebg"></view> </view> <view class='load-word'>加载中</view> </view> <text class="listFooter" wx:elif="{{loadStatus==2}}">没有更多数据了！</text> <text class="listFooter" wx:elif="{{loadStatus==-1}}">数据加载失败，请检查网络</text> <text class="listFooter" wx:elif="{{loadStatus==-2}}" >没有任何数据！</text> </block> .listFooter{ color: #888888; background: #EFEFF4; display: block; text-align: center;

CSS学习笔记2：选择器

阅读更多关于 CSS学习笔记2：选择器

标签选择器　　1、选择要给样式的目标标签，所以叫做标签选择器，也叫元素选择器。 2、给所有相同标签，给相同样式。按 Ctrl+C 复制代码按 Ctrl+C 复制代码类选择器 1、html声明，CSS调用 2、格式： .类名{属性:值;属性:值} 3、类名尽量不使用下划线（用中横线代替），纯数字，中文，具体见命名规范。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS注释</title> <style type="text/css"> /*标签选择器：标签作为选择器*/ p{ color: red; } div{ color: purple; } /*类选择器:html声明，CSS调用*/ .mingren{ color: orange; font-weight: bold; font-family: "微软雅黑" } .zuozhu{ color: blue; } </style> </head> <body> <p>李大嘴</p> <p>佟掌柜</p> <p>白展堂</p>  <div class="mingren">鸣人</div> <div class="zuozhu">佐助</div> </body> </html> 多类名选择器 1、混合搭配

js写评价的星星

阅读更多关于 js写评价的星星

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/ouqi_qiou/article/details/77428804 刚开始接触写星星评价时，哇！估计脑子刚被驴踢了，竟然想到了最笨的办法-手工画五角星。妈呀！ css样式都写了好大一串，还沾沾自喜终于画出来了，然后瞅一瞅旁边的妹子写得怎么样了，哇！人家机智的！直接用符号★就解决了！！！唉，智商捉急呀！先上图看看吧：虽然简单，还是有几个注意的地方： 1. 未点击时的hover效果，星星会随鼠标移动亮起来喔。 2. 点击后关闭hover效果。 3. 点击同一颗星星，星星可以随时换色。具体代码展示： <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> </head> <style type="text/css"> .stars{ white-space: nowrap; text-align:

前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

阅读更多关于前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cJMkwH9 源代码下载请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/002-rectangular-rotating-loader-animation 代码解读定义 dom，一个包含 3 个 span 的容器： <div class="loader"> <span></span> <span></span> <span></span> </div> 居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } 设置容器的尺寸： .loader { width: 150px; height: 150px; position: relative; }

订阅 nth-child