结构伪类是css3新增的类型选择器。 E:nth-child(n)、E:nth-of-type(n)就是其中之二。搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了。 首先先用文字语言来描述一下这俩: E:nth-child(n): 选择父元素下的第n个子元素 ...
属性 描述 CSS :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时,向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first child 向元素的第一个子元素添加样式。 :lang 向带有指定 lang 属性的元素添加样式。 伪类专门用来表示元素的一种的特 ...
2019-05-22 19:06 0 1992 推荐指数:
结构伪类是css3新增的类型选择器。 E:nth-child(n)、E:nth-of-type(n)就是其中之二。搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了。 首先先用文字语言来描述一下这俩: E:nth-child(n): 选择父元素下的第n个子元素 ...
nth-of-type: 简单来说nth-of-type会忽略其它标签的顺序而按照标签自身种类的顺序进行筛选,也就是选择的参照点并不是DOM数,而是自身。下面我们结合具体的例子来了解下。 代码效果如下图所示,文本中的第3个p标签背景颜色发生改变。 nth-child ...
css中的nth-child和nth-of-type用于选择父元素下第n个子元素,但是对于他们的理解却不够深入,所以通过这个下面的示例详细展示一下他们的效果。 一、准备页面 本次使用的都是.container下的元素,div和p统一编号为1-8,div元素有类node,会再显示 ...
有时候我们在处理多个同样的<span><.li>等时,其中有一两个需要与其他兄弟不一样,这时候我们就需要css3的伪类选择器 nth-child。下面总结一下几种选取方式 以下HTML css 共用 效果图: 1. e ...
语法: 下面就把CSS3标准中nth-child()用法大致介绍给大家: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法。 第一种:简单数字序号写法 :nth-child(number) 直接匹配第number个元素 ...
: 1.2、nth-child(odd) 父元素下的奇数子元素 等同于 nth-child(2n ...
1.官方解释: p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 2.大白话 p:nth-child ...
是因为之前觉得自己已经理解了nth-of-type但后来发现好像和自己之前理解的不太一样,于是打算写下 ...