优先级

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>

更多相关文章

  1. CSS选择器讲解
  2. 浅谈CSS选择器以及伪类选择器模块化
  3. 选择器的优先级,id,class,tag。前端组件样式模块化的原理与实现
  4. 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使
  5. 0322作业
  6. css基础：简单的选择器、伪类选择器与前端组件样式模块化知识
  7. css基础、选择器、模块化组件
  8. 【CSS入门】CSS基本语法和选择器优先级学习总结简介
  9. 伪类选择器,优先级,模块化

随机推荐

  1. Android编译错误：You have tried to chang
  2. android 开发中中，经常用到的代码
  3. Android AndBox 安安卜1.3发布
  4. Android的安全性和权限（Security and Perm
  5. android 获取Gps信息的程序源码
  6. Android 使用 TableLayout 布局拉伸宽度
  7. Apple 再挑起戰火，控告 Samsung 15款 Andr
  8. Android撸一个转盘抽奖
  9. android 中隐藏EditText的下划线方法
  10. android:configChanges属性