css选择器之:nth-child,css选择从n个开始到第几个,或者从第n个开始选择多个

今天遇到个小小的排版,要得到的结果是:

前3个li width:33.3% 第4个到第7个 li  width:25%;最后三个li width:33.3%

这个时候又不想写太长的选择器 比如li:nth-child(4),li:nth-child(5),li:nth-child(6),li:nth-child(7)这样看起是有点傻.


  <ul>  
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  <li><img src="./static/images/hd2.jpg" width="100%"></li>
  </ul>

解决办法:

li{ width:33.3%;}
li:nth-child(-n+7){ width:25%;}
li:nth-child(-n+3){ width:33.3%;}

这样子写就行,就是这样子倒起写,先把所有的选中设置样式。然后用后面的样式依次覆盖前面的样式,就完成了。

如果有大神知道怎么从第n个开始选择多个更简洁的写法,请指点一下。



Tags 建站 css

留言(0)

评论