这里首先要区分nth-of-type(n)和nth-child(n)的区别：

nth-of-type(n) 选择器匹配属于父元素的 特定类型 的第 N 个子元素的每个元素.
nth-child(n) 选择器选取父元素的第 N 个子元素， 与类型无关

写个demo理解：

<div class="container">
    <div>div1</div>
    <p>p1</p>
    <div>div2</div>
    <div>div3</div>
</div>
.contaicer>div:nth-of-type(2){
   color: red;

 可以看到文字颜色变红的是第二个div。
 
如果是用nth-child(n)来写呢？我们看下效果：
 
 .container>div:nth-child(2){
   color: red;

 为什么并没有字体变成红色呢？
 .container>div:nth-child(2) 找的是container下第二个子元素，如果这个元素是div，则字体颜色变红，否则则没有变化。
 
 .container>div:nth-child(3){
    color: red;

 .container>div:nth-child(3) 找的是container下第三个子元素，这个元素是div，字体变红。
 
如果是父元素下的子元素有很多类名不同的子元素，我们需要对其中一个类名中的某个元素做操作呢？
 
<div class="container">
   <div class="active">active1</div>
    <div class="abc">abc</div>
   <div class="active">active2</div>
    <div class="abc">abc</div>
   <div class="active">active3</div>
   <div class="active">active4</div>
</div>
类名为container的父元素下有2个类名为abc的子元素，4个类名为active的子元素。
 我想让第二个类名为active的子元素字体颜色为红色。
 
 .container .active:nth-of-type(2){
    color: red;

 通过 .container .active:nth-of-type(2) 这个选择器设置了样式之后发现第二个类名为active的元素字体颜色并没有发生变化，我们打印这个选择器看看：
 
 从图上可以看出，类名为active的元素有4个，但是.container .active:nth-of-type(2)这个选择器并没有获取到元素。
 
这是为什么呢？
 nth-of-type(n) 是根据类型获取元素的，跟类名其实没有关系，这个选择器实际上获取的是container下的第二个div元素，如果这个元素的类名为active，则样式发生变化，如果不是，则获取不到这个元素。
 
我们这个例子当中，container下的第三个div元素类名是active，我们来对第三个元素进行操作：
 
.container .active:nth-of-type(3){
    color: red;

 
 现在就可以获取到元素啦。
 
所以一定要注意的是： nth-of-type(n) 这个选择器是根据元素的类型进行选择，跟类名没有关系。
 
就着这个例子再来说一下jQuery通过 el.index() 获取元素下标的问题。
 还是刚刚那个例子，如果我们要通过jQuery获取第二个类名为active的元素的下标。
 先给类名为active的div绑定点击事件
 
$('.active').on('click',function(){
    console.log($(this).index());
});
按照我们的逻辑来说，我们希望的 也应该输出的 是下图这样的：
 
 但是实际输出的结果却是：
 
 诶？这是什么呢？为什么输出的是0 2 4 5？
 通过观察我们可以发现，0 2 4 5 分别是类名为active的div在父元素中所有元素所对应的索引。
 也就是说不管你是通过什么获取的，调用index()这个方法获取的都是相对于父元素的下标。
 
 
index() 方法返回指定元素相对于其他指定元素的 index 位置。
 这些元素可通过 jQuery 选择器或 DOM 元素来指定。
 注释：如果未找到元素，index() 将返回 -1。
 
注意文档说的是 相对于其他指定元素。
 这个方法可以传一个参数，也就是相对的元素
 
 
获得元素相对于选择器的 index 位置。
 该元素可以通过 DOM 元素或 jQuery 选择器来指定。
 
回到这个例子，如果我们这么写输出的结果就是我们想要的结果了：
 
$('.active').on('click',function(){
    console.log($(this).index('.active'));
});
这是说输出点击的元素相对于active这个类名的索引。如果不传就是相对于点击元素的父元素。
                    这里首先要区分nth-of-type(n)和nth-child(n)的区别：nth-of-type(n)  选择器匹配属于父元素的 特定类型 的第 N 个子元素的每个元素.nth-child(n)     选择器选取父元素的第 N 个子元素， 与类型无关写个demo理解：&amp;lt;div class=&quot;container&quot;&amp;gt;        &amp;lt;div&amp;gt;div1&amp;lt;/...
				
前言：今天码代码时候遇到的需求要选取前两个标签元素，查了资料记录下来~nth-child（n）、first-child、last-child用法注：nth-child(n)选择器匹配父元素中的第n个子元素。 
n可以是一个数字，一个关键字，或者一个公式。
1.1 CSS层叠性
所谓层叠性是指多种CSS样式的叠加
是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内...
 （2）border-radius属性用于设置元素的外边框圆角。
  border-radius: 10px;
 （3)如果是正方形，想要设置为一个圆，把数值修改为高度或宽度的一半即可，或直接写50%。
  border-radius: 50%;
 （4）如果是个矩形，设置为高度的一半就可以做。
 （5）可以设置不同的圆角，四个值分别代表顺时针的顺序。
2.盒子阴...
				
一,选择器
　　:first-child　　　　p:first-child(first第一个 child子元素)(找第一个子元素为p)
　　:last-child　　　　p:last-child(last倒数 child子元素)(找倒数第一个子元素为p)
　　:first-of-type　　  p:first-of-type(first第一个 type类型)(找第一个p)
...
				
目录标题前言E:first-child的第一个误区（只会选中我规定的区域中的一个，不会遍历其下有多少个孙或曾孙元素）E:first-child的第二个误区（不管这个E元素前面有几个兄弟，只要我是第一个E元素，那我就会生效）如何只选择指定元素中子元素呢？不考虑膝下有多少个孙子和曾孙呢。
最近在项目中用到 :first-child 很容易的就想到了，嗯嗯。这不就是选择第一个元素吗？
好像很好用，...
1. 使用绝对定位和负边距：
子元素使用绝对定位，并设置 top 和 bottom 值都为 0，然后再设置负边距让子元素超出父元素的区域，即可实现子元素和父元素一样高。
2. 使用 display: table 属性：
父元素设置 display: table；子元素设置 display: table-cell 和 vertical-align: top；然后再设置 height: 100% 即可实现子元素和父元素一样高。
3. 使用 flexbox 布局：
父元素设置 display: flex；然后再设置 align-items: stretch，即可实现子元素和父元素一样高。
总结来说，实现 CSS 子元素和父元素一样高的方式多种多样，选择哪种方式取决于具体的需求和实际情况。无论哪种方式，都需要充分了解 CSS 相关属性和布局方式，才能达到最佳的效果。