nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法

我将这坨伪类分成三组,第一组:nth-child,nth-last-child,only-child第二组:nth-of-type,nth-last-of-type,第三组:first-of-tpye,last-of-type,第四组:first-child,last-child。

==1==

nth-child定义是:其父级的第x个子元素。写法有两种:

p :nth-child(x)

p:nth-child(x)

第一种指的是p的第x个子元素,无需查找,明确指明父级,而子级无论是什么元素都将被选择。

第二种指的是p的父级元素的第x个子元素,此时父级元素并未指定,是该选择器去查询的包含有p元素的父级容器,但此时nth-child选择类型被明确指定了,只能是p元素,因此就会出现从p的父级去查找其子元素的时候,找不到p:nth-child(x)的情况,因为此时是在p的父级元素底下对所有子元素进行索引,x对应的p只有都具备的时候该选择器才能选中元素,换句话说,p的父级下的子元素,只有同时符合既是p元素且索引正好是x,才能被选中。

搞清楚了哈。再说说nth-child括号内可以允许的参数,包括数值,关键词(odd,even)及公式。

数值很好说,就是子元素的索引,该索引不单单指特定元素,而是所有子元素。关键词当然也是子元素的奇偶索引,因为含一个单子元素的情况很多见,因此奇数总是多于偶数比较常见。

公式,an+b,a,b是常数,而n是自然数,也就是0到无穷,变种2n+1,3n+1,-n+7(7以前的数字),而若数字x为n代表所有元素。关于求交并补集,以下两篇博文写的很清楚,不赘述:

http://www.qdfuns.com/notes/17398/84081c84d8c2056c6f4935c3c7fc6bbf:storey-13.html

http://www.qdfuns.com/notes/17398/f5371a84f07992c180561e0272bf800c.html

http://www.qdfuns.com/notes/17398/fa3777cd51a94d7ab30c87bd479a1471.html

nth-last-child跟nth-child一样,一个正序,一个倒序,而only-child指的是仅仅含有某指定元素或者未指定但是只有一个子元素的。

==2==

第二组,first-chlid和last-child,是nth-child(1)和nth-last-child(1)的简写 ,不赘述。

==3==

第三组nth-of-type,nth-last-of-type,last-of-type,first-of-type,only-of-type。

nth-of-type,nth-last-of-type,可以分别从前到后和从后到前选一组,而first-of-type和last-of-type则只能选第一个和最后一个。相对于第一组,它们的区别在于:

p :nth-of-type(1)

p:nth-of-type(1)

前者会选择所有第一次出现的不同子元素的第一个。比如有10个子元素,其中a3个,span2个,p3个,div一个,em一个,则会将a,span和p的第一个选中,div和em也被选中。因此nth-of-type的最佳用途肯定不是这样使用。而第二种用法则会将p的父级元素下的所有子元素种的第一个选中,索引不会计算其他非p元素。

大概就这么多。反正我懂了。其他遇到再说。

时间: 2024-11-15 00:57:28

nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法的相关文章

IE6/7兼容伪类、IE9以下兼容颜色渐变、IE8以下兼容nth:child(n)

1.IE6/7兼容伪类 _1.CSS部分:一个有冒号,一个是空格分隔.前者IE8+及其他现代浏览器:后者为IE6-7准备的 #test:before, #test before{ content: attr(data-content); width: 0; height: 0; } _2.HTML部分 <div id="test"  data-content=""></div> 设置content _3.JS部分 设置IE6/7 var $b

CSS3 nth 伪类选择器

考察下面的 HTML 代码片段: <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> <li> <ul> <li>sub item 1</li> <li>sub item 2</li> <li>sub item

CSS 伪类(下)结构性伪类\UI伪类\动态伪类和其他伪类 valid check enable child required link visit

伪类选择器汇总伪类选择器有4种, 结构性伪类\UI伪类\动态伪类和其他伪类. 具体如下 结构性伪类选择器结构性伪类选择器它能够根据元素在文档中的位置选择元素, 这类元素都有个前缀":"1. 根元素选择器 只作用于html等底部标签.很少用 .. :root 2. 子元素选择器 子元素全选还要更细致 ul>li:first-child{ } 增加伪类first-child 第一个 ul>li:last-child{ } 增加伪类last-child 最后一个 ul>li

Jquery 之 使用选择器

jQuery选择器描述 jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的.jQuery 选择器采用CSS和Xpath选择符的能力,能够满足用户在DOM中快捷而轻松地获取元素或元素组. jQuery选择器的种类 基本选择器 层级选择器 伪类选择器(简单的伪类选择器.与内容相关的伪类选择器.与元素显示状态相关的伪类选择器.匹配子元素的伪类选择器.与表单对象相关的伪类选择器.与表单属性相关的伪类选择器) 属

Codeforces Round #250 (Div. 1) B. The Child and Zoo(排序+并查集)(常规好题)

B. The Child and Zoo time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standard output Of course our child likes walking in a zoo. The zoo has n areas, that are numbered from 1 to n. The i-th area contains 

[LeetCode][SQL]Nth Highest Salary

Nth Highest Salary Write a SQL query to get the nth highest salary from the Employee table. +----+--------+ | Id | Salary | +----+--------+ | 1 | 100 | | 2 | 200 | | 3 | 300 | +----+--------+ For example, given the above Employee table, the nth highe

Child &lt;- many-to-one -&gt;Parent

网上找到个描述的很精妙的例子 Child   <-   many-to-one   ->Parent         class   Child   {         private   Parent   parent;             public   Parent   getParent   (){             return   this.parent;//访问了实例变量         }             }         class   Parent  

2000行之mother、father、child

//child.h #ifndef CHILD_H #define CHILD_H #include <string> using namespace std; class Mother; class Father; class Child { public: Mother *mama; Father *baba; Child(); string name; void answer(); void callParent(); }; #endif // CHILD_H //child.cpp #

解决:[WARNING] fpm_children_bury(), line 215: child 2736 (pool default) exited on signal 15 SIGTERM after 59.588363 seconds from start

试用Nginx + PHP FastCGI 做WEB服务器,运行了几个月的时间,烦恼的是经常碰到Nginx 502 Bad Gateway 这个问题. 参考了很多修改办法,这个502的问题一直存在,今天打算重装PHP FastCGI到PHP的安装目录里一看,发现PHP的日志文件已经有几十M的大小,打开一看,结果基本全部都是一下的错误: Jan 11 08:54:01.164292 [NOTICE] fpm_children_make(), line 352: child 10088 (pool

codeforce 437 D The Child and Zoo

题意:给出n个带权值的点,m条边,任意两点之间的一条路径的权值为这条路径上的所有点中的最小权值,任意两点间的权值为它们之间所有路径的权值中最大的那个. 做法:考虑下并查集,就是首先把所有边降序排序,然后开始建立并查集,若要加入的两点已经在同一个集合中,那么已经贡献到了ans,不用管了,若不在,则进行合并,利用乘法原理也就是两个集合元素数量相乘算出它们之间能够形成多少路径,这些路径的权值就是这两个点的最小权值,然后贡献给ans,不断如此,就可算出答案.还是很有意思的. #include<map>