##场景
我们在写一些类似朋友圈晒图的九宫格布局时，经常会遇到一下几种情况：
1.只有一张图
2.只有两张图
3.只有三张图
4.只有四张图
5.四张图以上等

最终实现：
codepen

当然实际的表现要根据产品需求来定，还有其他一些需要根据兄弟元素的数量来设置不同样式的需求。那我们如何实现呢？以前我是给不同的情况通过JS添加不同的类名，现在发现可以直接通过CSS的:nth-child来实现，同样:nth-of-type也是适用的，接下来我们就来了解这种解决思路吧！

##解决方案

定义和用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。

element1~element2 选择器 element1 之后出现的所有 element2。
两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

下面我们以:nth-child(n) 为例来考虑如何解决问题，给每个 li 加类名 item-img
情况一：只有一张图

//该子元素是唯一的
.item-img:only-child{   
	  width: 50%;
//该子元素既是第一个子元素，又是最后一个子元素，则说明只有一个子元素
.item-img:first-child:last-child{   
	  width: 50%;
情况二：只有两张图
 
.item-img:first-child:nth-last-child(2),
.item-img:first-child:nth-last-child(2) ~ .item-img{
	width: 40%;
把上面的样式解读就是：
 1.该子元素既是第一个，同时又是从后往前数第二个，能满足这个条件的只有一个正好有2个列表项的列表中的第一个列表项
 2.有且只有两个子元素，找到第一个子元素，（ ~ ）及其后面所有.item-img类的兄弟元素（也就是所有的子元素）。
 
其他情况同理
 
.item-img:first-child:nth-last-child(4),
.item-img:first-child:nth-last-child(4) ~ .item-img{
	width: 35%;
##扩展
 根据兄弟元素的数量范围来匹配元素。
 
//n为0 ~ +∞
:nth-child(an+b)
我们常用这样的表达来寻找某些元素，比如：
 :nth-child(2n+1)会找到第1,3,5,7,9…个元素
 :nth-child(3n+3)会找到第3,6,9…个元素（可以用来去除边界元素的边距）
 :nth-child(n+4)会找到第4个元素开始的后面所有元素
 
n+b 这种形式的表达式可以选中从第 b 个开始的所有子元素。
 利用这个原理和之前确定兄弟元素数量的方法，我们可以做如下操作：
 
li:first-child:nth-last-child(n+4),
li:first-child:nth-last-child(n+4) ~ li {
/* 没有n时代表刚好4项，加上n时代表至少包含4项*/
/* 当列表至少包含4项时，命中所有列表项 */
同理， -n+b 这种形式的表达式可以选中开头的 b 个元素。
 
li:first-child:nth-last-child(-n+4),
li:first-child:nth-last-child(-n+4) ~ li {
/*仅当列表中有 4 个或更少的列表项时，选中所有列表项。*/
/* 当列表最多包含4项时，命中所有列表项 */
结合使用：
 
li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
/* 当列表包含2～6项时，命中所有列表项 */
解读：该子元素是第一个子元素的前提下还要满足:nth-last-child(n+2):nth-last-child(-n+6)，注意这里的n是不同的，所以会让该公式计算的结果唯一。
 
:nth-last-child(0+2):nth-last-child(-4+6)	//2
:nth-last-child(1+2):nth-last-child(-3+6)	//3
:nth-last-child(2+2):nth-last-child(-2+6)	//4
:nth-last-child(3+2):nth-last-child(-1+6)	//5
:nth-last-child(4+2):nth-last-child(-0+6)	//6
我们主要是利用了CSS中的伪类，:first-child、:only-child、nth-last-child(n)以及兄弟选择符~来实现各种数量子元素样式的操作，这样处理首先不需要再通过JS动态添加类了，最大程度的解耦，其次是打开了我们对选择器的思路，同时还想到也可以利用相邻元素+来做一些相应的样式设置，是很好的实践。
                    场景我们在写一些类似朋友圈晒图的九宫格布局时，经常会遇到一下几种情况： 1.只有一张图 2.只有两张图 3.只有三张图 4.只有四张图 5.四张图以上等 最终实现：See the Pen <a href="https://codepen.io/xiangshuo1992/pen/MQmwam/">MQmwam</a> by Luke.Deng (<...
				
tailwindcss-pseudo-elements
 TailwindCSS插件，添加伪元素的变体（ ::before ， ::after ， ::first-letter等）。
npm install tailwindcss-pseudo-elements --save-dev
yarn add tailwindcss-pseudo-elements -D
const plugin = require ( 'tailwindcss/plugin' )
module . exports = {
  variants : {
    extend : {
      textColor : [
        'responsive' ,
        'hover' ,
        'focus' ,
        'before' ,
				
要快速进行网页排版布局，则必须对布局的元素有清晰的了解，才不会总是在细节处出错。这一篇先详解有关布局的因素作为布局基础：块级元素and内联元素、盒模型、准确定位、元素对齐、样式继承。下一篇则重点描述快速布局思路。
一、什么是块级元素和内联元素
1，块级元素：
display:block表现出来的特点是折行的，一般来说可以包含块级元素和内联元素；
　　P 元素，只能包含内联元素，...
Grid：网格布局。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。类似于HTML中的Table标签。
	StackPanel:栈式面板。可将包含的元素在竖直或水平方向上排成一条直线，当移除一个元素后，后面的元素会自动向前移动以填充空缺。
	Canvas:画布。内部元素可以使用以像素为单位的绝对坐标进行定位，类似于Windows Form编...
:nth-child(n+4)
将会选中除了第一、二、三个子元素之外的所有子元素。
li:first-child:nth-last-child(n+4),
li:first-child: ...
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：
h1 > strong {color:red;}
例子：结果就是第一行得第一个，第二个very变红，第二行得代码并没有变红
<h1>This is <strong>very</strong&gt
				
div块元素简单布局：将div水平排列及解决内容错位问题
先梳理一下看懂这篇文章需要的基础知识：
1.html里主要有块元素和行内元素。块元素默认从上到下排列，行内元素默认水平排列。当然我们布局主要用到的div是块元素，这个显然不是我们想要的，我们需要通过加一些控制语句来改变它的属性。
2.display是css里的一个语句，现在只需要知道它可以改变元素的布局方式（详细的我就不说了，后面的内容也一...
				
CSS进阶（六）结构与布局
文章目录CSS进阶（六）结构与布局一、自适应内部元素解决方案二、精确控制表格列宽解决方案三、根据兄弟元素的数量设置样式场景解决方案根据兄弟元素的数量范围来匹配元素四、满幅的背景，定宽的内容背景解决方案五、水平居中和垂直居中（重点）5.1 水平居中5.2 垂直居中基于绝对定位的解决方案基于视口单位的解决方案1. 视口单位基于flexbox的解决方案（最佳）六、紧贴底部的页脚Flexbox方案（推荐）
一、自适应内部元素
CSS内部与外部尺寸模型：http://w3.org
				
CSS的nth-child(n)是用来匹配HTML元素的一种伪类选择器。其中n代表一个整数，表示要选择的元素在其父元素的子元素中的位置。比如nth-child(2)表示选择父元素的第二个子元素。
该选择器可以用于任何HTML元素，包括div、p、ul、li、table等等。在某些情况下，使用它可以更精确地控制页面样式和布局。
例如，在一个ul列表中，我们想要特殊处理第二个li元素，可以通过nth-child(2)来选择它，并添加特殊样式。
还可以通过组合使用nth-child(n)和其他选择器，实现更加复杂的页面布局效果。
需要注意的是，nth-child(n)选择器是基于所有元素的位置而不是它们的内容来匹配的。如果想要根据元素的内容来匹配，可以使用CSS的其它选择器。
总的来说，nth-child(n)是CSS中常用的一个伪类选择器，可以将HTML元素按照它们在父元素中的位置进行精准选择并修改对应样式。