nth-child

css3D动画 前言 最近玩了玩用css来构建3D效果，写了几个demo，所以博客总结一下。 在阅读这篇博客之前，请先自行了解一下css 3D的属性，例如：transform-style，transform-origin，transform, perspective。 写一个简单的立方体 1、我们先用css实现一个长方体，一个长方体有6个边，我们写6个li，并用一个ul包裹起来,根据我写3D动画的经验，最好有一个父元素来包裹 <div class="parent"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> 2、先给.parent设置宽高，并且给他设置视距和基点位置。 .parent{ width: 800px; height: 400px; border: 1px solid #000; margin: 0 auto; perspective: 2000px; perspective-origin: -40% -80%; background: #000; } 3、给ul设置宽高以及preserve-3d属性保留子元素3d转换，子元素li全部绝对定位 ul{ width: 50px; position: relative; margin: 100px

1、first-child first-child表示选择列表中的第一个标签。代码如下： li:first-child{background:#090} 上面的意思是，li 列表中的 第一个li模块的背景颜色。 2、last-child last-child表示选择列表中的最后一个标签，代码如下： li:last-child{background:#090} 3、nth-child(3) 表示选择列表中的第3个标签，代码如下： li:nth-child(3){background:#090} 上面代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。 4、nth-child(2n) 这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签。 5、nth-child(2n-1) 这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签。 6、nth-child(n+3) 这个表示选择列表中的标签从第3个开始到最后。 7、nth-child(-n+3) 这个表示选择列表中的标签从0到3，即小于3的标签。 8、nth-last-child(3) 这个表示选择列表中的倒数第3个标签。 来源： https://www.cnblogs.com/ll15888/p/11858346.html

css3的出现让我们可以用css画一些简单的动画,之前加载中这样的效果需要设计帮我们出图,而现在我们可以通过css代码来实现加载动画,这我们可以不用完全依靠设计了。 1. 代码如下 <div class="loading"></div> <style> .loading { width: 50px; height: 50px; border: 5px solid #eee; border-left-color: #e27a61; border-radius: 50%; animation: loading-animate 1s linear infinite; } @keyframes loading-animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> 2. 代码 <div class="loading"> <span><i></i></span> <span><i></i></span> <span><i></i></span> <span><i></i></span> <span><i></i></span> <span><i></i></span> <span><i></i></span> <span><i></i></span> <span><i><

1. 自我介绍 2. 对前端的理解 3. 为什么li中间会出现空隙 li{ display: inline-block; background: red; width: 300px; height: 100px; } <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> 浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个 <li> 放在一行，这导致 <li> 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。 解决： 方法一：为 <li> 设置 float: left 。不足：有些容器是不能设置浮动，如左右切换的焦点图等。 方法二：将所有 <li> 写在同一行。不足：代码不美观。 方法三：将 <ul> 内的字符尺寸直接设为0，即 font-size: 0 。不足： <ul> 中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。 方法四：消除 <ul> 的字符间隔 letter-spacing: -8px ，而这也设置了 <li> 内的字符间隔，因此需要将 <li> 内的字符间隔设为默认 letter-spacing: normal 。 4. 实现图片瀑布流(自适应多列)

扇形效果 */ /*--> */ 1 2 3 4 5 6 7 8 9 10 11 12 13 来源： https://www.cnblogs.com/qingmengWEB/p/11811392.html

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: here's the case: https://jsfiddle.net/rpepf9xs/ I want to remove the border-bottom with selector: "nth-last-child()", however, if there are only 8 "li" in list, it goes wrong like this: ul { display : block ; width : 100 %; margin : 0 ; padding : 0 } li { display : block ; width : 33 %; height : 120px ; float : left ; margin : 0 ; padding : 0 ; border - bottom : #666 1px solid; background : #fcc } li : nth - last - child ( 3 ), li : nth - last - child ( 2 ), li : last - child { border - bottom : 0px } <ul> <li> 1 </li> <li> 2 </li>

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 由 翻译 强力驱动 问题: Say I have the following structure for a list: <ul> <li></li><li></li> <li></li><li></li> </ul> and each <li> is 50% width so I want every two to have the same background colour like this: <ul> <li style = " background :# CCC ; " ></li><li style = " background :# CCC ; " ></li> <li style = " background :# DDD ; " ></li><li style = " background :# DDD ; " ></li> <li style = " background :# CCC ; " ></li><li style = " background :# CCC ; " ></li> <li style = " background :# DDD ; " ></li><li style = " background :# DDD ; " ></li> <

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: Is it possible to mix :nth-child() and after ? I have an <ol> of items and I want to add some text :after . This works fine but I'd then like to have different text on 1st, 2nd and 3rd items and then 4th, 5th and 6th as well. With the below code I end up with every li having 'large' in pink after it. This doesn't make sense to me however I am new to this nth-child malarky. data.html <ol id="id" class="ui-sortable"> <li> <p>Bacon</p> </li> <li> <p>Bacon</p> </li> <li> <p>Bacon</p> </li> <!.. repeats --> <li> <p>Bacon</p> </li> </ol> pretty

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试): 问题: #mainbody :nth-child(1){ border-color: #FFCC00; } #mainbody :nth-child(2) { border-color: #FFAA00; } #mainbody :nth-child(3) { border-color: #FF8800; } #mainbody :nth-child(4) { border-color: #FF6600; } This is awkward, especially if you add another 20 children. Would it be possible to use something like this, feeding calc() the position and using it in rgb() ? Is there another way of doing this? ( counter() ?) #mainbody h2 { border-color: rgb(255, calc( 255 / ( childposition / 4 ) ) ,0); } The following shows promise but I don't think rgb()

由于跳不过这个环节博主就想了用selenium去破解于是就开始一步一步的傻瓜式操作来实现自动登录，在登录的过程中发现在自动登录是时候需要破解滑动验证码，博主研究好久以及网上帖子找了好多也没有办法成功，后来就想着如果这个路走不了我们能不能换个路经过研究发现可以采取第三方登录的方式就可以跳过这个滑动模块，我们要讲的是通过微博来登录淘宝。 第一步、首先定位元素定位到微博登录的元素。 第二步，点击微博登录看一下跳转的页面，这个时候我们去利用selenium来实现自动登录就可以跳过淘宝的滑动验证码了。 下面是我跳转登录写的代码，看着有点复杂。 from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.support.wait import WebDriverWait import time broswer = webdriver.Chrome() wait = WebDriverWait(broswer,10) def get_url(): #网址可以更改为用微博登录的网址'https://weibo.com/login