nth:child()选择器

nth:child()属于CSS3中的选择器，针对于有多个相同标签时可以对每个标签的样式进行单独设置，以微信小程序开发中所写的代码为例：

这是wxml中的代码（类似于html）：

这是wxss中的代码（类似于css）：

最终效果为可拖动的轮播图：

D为白色，A为浅绿色，B为浅蓝色，C为白色

从swiper-item的父元素swiper查起，第一个应为D，第二个为A，第三个为B，第四个为C，以此类推。

但第一个swiper-item为白色而不是粉色，第二个A是浅绿色，是因为在nth-child后面还有限定.item，而D并没有设置class="item"，因此D还占一个位子但不设置颜色，A应从2开始设置为浅绿色

:nth-child(n){}来匹配父元素中的第n个子元素，简单理解就是看 “ ：”前的元素的父元素，n为几，就从父元素的第一个元素开始查起到n

nth:child()选择器相关推荐

html的选择器child,css child选择器妙用
css child选择器妙用:倒数第n,奇数列,偶数列,倍数列,第n个到最后,第一个到n 1.first-child first-child表示选择列表中的第一个标签. 2.last-child la ...
css3 nth child 偶数,转载：CSS3 :nth-child(n)方法
:nth-child(n) ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n) ---->选中p元素,且该p元素必须是某个父元素下的第 ...
python selenium 等待元素出现_Python Selenium等待加载几个元素
考虑到Mr.E.和Arran的评论,我在CSS选择器上完全遍历了列表.棘手的部分是关于我自己的列表结构和标记(更改类等),以及动态创建所需的选择器并在遍历期间将它们保存在内存中. 我通过搜索任何未加载 ...
CSS3 nth 伪类选择器
考察下面的 HTML 代码片段: <div><section>section 1</section><section>section 2</sec ...
html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
[翻译]帮助文档-jQuery 选择器
jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言.如果你了解CSS(绝大部分WEB开发者都用到的),那 ...
jQuery:掌握选择器
选择器至少可以追溯到"CSS选择器".jQuery的源代码中内嵌了一个叫Sizzle的对象,其实就是选择器了.在jQuery官网上显示Sizzle属于"Other jQu ...
SeleniumCSS选择器
1.什么是Selenium CSS选择器? (1. What is Selenium CSS Selector?) It is one of the locators in selenium usin ...
JavaScriptJQuery_jQuery选择器
jQuery的选择器 jQuery的选择器基本选择器 ID选择器 ($("#id") ) 元素选择器 ($("#id") ) 类名选择器 $(".c ...

nth:child()选择器

nth:child()选择器相关推荐

最新文章

热门文章