博客列表 >0707伪类选择器/盒模型

0707伪类选择器/盒模型

小言
小言原创
2022年07月08日 16:05:03311浏览
  1. <ul class="list">
  2. <li class="first">item1</li>
  3. <li>item2</li>
  4. <li>item3</li>
  5. <li>item4</li>
  6. <li>item5</li>
  7. <li>item6</li>
  8. <li>item7</li>
  9. <li>item8</li>
  10. </ul>
  1. css内容
  2. /**全部变成统一背影色*/
  3. .list >li:nth-of-type(n){
  4. background-color: brown;
  5. }
  6. /**奇数变成某一个颜色*/
  7. .list >li:nth-of-type(2n + 1){
  8. background-color: aqua;
  9. }
  10. /**偶数变成某一个颜色*/
  11. .list >li:nth-of-type(2n + 2){
  12. background-color: burlywood;
  13. }
  14. /**第三个 变成 黑色,然后到第五个变成 黑色*/
  15. .list >li:nth-of-type(5n + 3){
  16. background-color: black;
  17. }

  1. <div class="box"></div>
  2. <style>
  3. .box{
  4. background-color: aqua;
  5. background-clip: content-box;
  6. height: 150px;
  7. width: 150px;
  8. box-sizing: border-box;
  9. padding: 10px;
  10. margin: 30px;
  11. border: 1px solid red;
  12. }
  13. </style>

盒子模型学习使用margin/padding

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议