search

博客列表 >CSS学习（一）

CSS学习（一）

▽空城旧梦
▽空城旧梦原创
2021年03月24日 07:59:36536浏览

优先级

id>class>元素

可以通过（id，类，标签）个数进行比较

模块化和组件使用

  1. header {
  2.   min-height: 20em;
  3.   background: lightskyblue;
  4.   color: red;
  5. }
  6. main {
  7.   min-height: 50em;
  8.   background: red;
  9.   color: black;
  10.   font-size: 20px;
  11.   font-style: inherit;
  12. }
  14. h1 {
  15.   color: cyan;
  16. }
  18. footer {
  19.   min-height: 10em;
  20.   background: purple;
  21.   color: skyblue;
  22. }
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>CSS2.0</title>
  8.     <style>
  9.       @import url(css/demo2.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <header>
  14.       <a href="">首页</a><a href="">第二页</a><a href="">第三页</a>末页<a
  15.         href=""
  16.       ></a>
  17.     </header>
  18.     <main>
  19.       <h1>数字4.0解决方案</h1>
  20.       <p>方案</p>
  21.     </main>
  22.     <footer>
  23.       <p>仅限中国使用</p>
  24.     </footer>
  25.   </body>
  26. </html>

伪类学习

  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>选择器</title>
  8.     <style>
  9.       ul li {
  10.         background: cyan;
  11.       }
  13.       /* body > ul > li {
  14.         background: red;
  15.       } */
  17.       /* .start + li {
  18.         background: white;
  19.       }
  21.       .start ~ li {
  22.         background: yellow;
  23.       } */
  24.       */ tr:nth-of-type(2) {
  25.         background: green;
  26.       }
  28.       .list td:nth-of-type(3) {
  29.         background: cyan;
  30.       }
  32.       .list tr:nth-of-type(3) {
  33.         background: red;
  34.       }
  36.       #morder.list li:nth-last-of-type(1) {
  37.         background: greenyellow;
  38.       }
  40.       .start > li:nth-last-of-type(1) {
  41.         background: cadetblue;
  42.       }
  44.       .start > li:first-of-type {
  45.         background: purple;
  46.       }
  47.     </style>
  48.   </head>
  49.   <body>
  50.     <ul class="start" id="morder">
  51.       <li>item1</li>
  52.       <li>item2</li>
  53.       <li>
  54.         item3
  55.         <ul>
  56.           <li>item1</li>
  57.           <li>item2</li>
  58.           <li>item3</li>
  59.         </ul>
  60.       </li>
  61.       <li>item4</li>
  62.       <li>item5</li>
  63.     </ul>
  64.     <div>
  65.       <table class="list" border="1" width="75%" cellspacing="0">
  66.         <tr>
  67.           <td>一</td>
  68.           <td>二</td>
  69.           <td>三</td>
  70.         </tr>
  71.         <tr>
  72.           <td>四</td>
  73.           <td>五</td>
  74.           <td>六</td>
  75.         </tr>
  76.         <tr>
  77.           <td>七</td>
  78.           <td>八</td>
  79.           <td>九</td>
  80.         </tr>
  81.       </table>
  82.     </div>
  83.   </body>
  84. </html>
上一条：css元素选择器下一条：新浪博客提示“系统繁忙，请稍候再试”的解决方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议