search

博客列表 >CSSS层级选择器-复习

CSSS层级选择器-复习

异乡客
异乡客原创
2022年05月08日 09:28:36679浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  11. <!-- ul.list>li{item$}.item*8 -->
  12.     <ul class="list">
  13.         <li class="item">item1</li>
  14.         <li class="item second">item2</li>
  15.         <li class="item">item3
  16.             <!-- ul.inner>li{itm3-$}*3 -->
  17.             <ul class="inner">
  18.                 <li>itm3-1</li>
  19.                 <li>itm3-2</li>
  20.                 <li>itm3-3</li>
  21.             </ul>
  22.         </li>
  23.         <li class="item">item4</li>
  24.         <li class="item">item5</li>
  25.         <li class="item">item6</li>
  26.         <li class="item">item7</li>
  27.         <li class="item">item8</li>
  28.     </ul>
  31.     <style>
  33.         /* 
  34.         空格  后代元素，
  35.         >     子元素
  36.         +     相邻兄弟
  37.         ~     所有兄弟    
  38.         */
  39.         .list>li{
  40.             border: 1px solid #000;
  41.         }
  43.         .list li{
  44.             border: 1px solid #000;
  45.         }
  47.         .item.second{
  48.             background-color: red;
  49.         }
  51.         .item.second + * {
  52.             border: 2px solid yellow;
  53.         }
  55.         .item.second ~ * {
  56.             border: 2px solid yellow;
  57.         }
  58.     </style>
  59. </body>
  60. </html>
上一条：MVC实例演示下一条：CSS选择器1-复习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多