利用到的高级选择器
:first-of-type
选择器匹配属于其父元素的特定类型的首个子元素的每个元素
:nth-last-of-type(n)
选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,从最后一个子元素开始计数
element1 ~ element2
选择前面有 element1 元素的每个 element2 元素。
即
/* 既是第一项又是最后一项 */ :first-of-type:last-of-type
/* 既是第一项又是倒数第二项 */ :first-of-type:nth-last-of-type(2)
/* 既是第一项又是倒数第n项 */ :first-of-type:nth-last-of-type(n)
实例: 小于4个则宽度平均分配,大于4个则宽度自适应
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
ul{ display: block; width: 800px; margin: 100px auto; list-style: none; } li{ display: inline-block; } /* 只有1项 */ li:first-of-type:last-of-type, li:first-of-type:last-of-type ~ li{ width: calc( 100% / 1 ); } /* 只有2项 */ li:first-of-type:nth-last-of-type(2), li:first-of-type:nth-last-of-type(2) ~ li{ width: calc( 100% / 2 ); } /* 只有3项 */ li:first-of-type:nth-last-of-type(3), li:first-of-type:nth-last-of-type(3) ~ li{ width: calc( 100% / 3 ); } /* 只有4项 */ li:first-of-type:nth-last-of-type(4), li:first-of-type:nth-last-of-type(4) ~ li{ width: calc( 100% / 4 ); }
引用于 https://www.cnblogs.com/xinjie-just/p/10069626.html