一.选择器的优先级 id,class,tag

  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>选择器的优先级 id,class,tag</title>
  8.     <style>
  9.       /* 1,1,3 */
  10.       html body h1#id1.class1 {
  11.         color: purple;
  12.       }
  14.       /* id选择器，优先级别大于class */
  15.       /* 1,0,3 */
  16.       html body h1#id1 {
  17.         color: blue;
  18.       }
  19.       /* 1,0,2 */
  20.       body h1#id1 {
  21.         color: blueviolet;
  22.       }
  24.       /* 选择器本身优先级大于书写顺序 */
  25.       /* 类样式 */
  26.       /* 0,1,2 */
  27.       body h1.class1 {
  28.         color: lightsalmon;
  29.       }
  30.       /* 0,1,1 */
  31.       h1.class1 {
  32.         color: lightcoral;
  33.       }
  35.       /* 标签 */
  36.       /* 0,0,3 */
  37.       html body h1 {
  38.         color: yellow;
  39.       }
  40.       /* 优先级相同时，书写顺序决定优先级 */
  41.       html body h1 {
  42.         color: lawngreen;
  43.       }
  44.     </style>
  45.   </head>
  46.   <body>
  47.     <h1 class="class1" id="id1">hello world</h1>
  48.   </body>
  49. </html>

由此可见选择器的优先级，id>class>tag

二.样式模块化

  • 效果图

  • html 页面代码

  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>模块化样式组件</title>
  8.     <link rel="stylesheet" href="css/style.css" />
  9.   </head>
  10.   <body>
  11.     <header>页眉</header>
  12.     <main>主体</main>
  13.     <footer>页脚</footer>
  14.   </body>
  15. </html>
  • css (style.css) 组件代码
  1. header {
  2.   min-height: 3em;
  3.   background-color: aqua;
  4. }
  6. main {
  7.   min-height: 20em;
  8.   background-color: lightcyan;
  9. }
  11. footer {
  12.   min-height: 5em;
  13.   background-color: blueviolet;
  14.   color: #fff;
  15. }

三.伪类选择器的使用方式

  • 效果图

  • html 代码

  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>伪类选择器</title>
  8.     <style>
  9.       /* 选择第一个元素 */
  10.       .list li:first-of-type {
  11.         background-color: aqua;
  12.       }
  14.       /* 选择第三个元素 */
  15.       .list li:nth-of-type(3) {
  16.         background-color: lightgreen;
  17.       }
  19.       /* 选择最后一个元素 */
  20.       .list li:last-of-type {
  21.         background-color: blueviolet;
  22.       }
  24.       /* 选择倒数第五个元素 */
  25.       .list li:nth-last-of-type(2) {
  26.         background-color: lightcoral;
  27.       }
  29.       /* 使用伪类获取到p元素 */
  30.       .list :only-of-type {
  31.         background-color: yellow;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <ul class="list">
  37.       <li>item1</li>
  38.       <li>item2</li>
  39.       <li>item3</li>
  40.       <li>item4</li>
  41.       <li>item5</li>
  42.       <p>item6</p>
  43.       <li>item7</li>
  44.       <li>item8</li>
  45.       <li>item9</li>
  46.       <li>item10</li>
  47.     </ul>
  48.   </body>
  49. </html>

更多相关文章

  1. 1. 实例演示box-sizing属性; 2. 实例演示常用的元素居中方式
  2. CSS：box-sizing理解与相对定位与绝对定位理解
  3. css基础：box-sizing功能与定位功能的应用
  4. em,rem的原理与应用场景,分析 rem / em /vh/ vw的区别与联系
  5. CSS盒模型以及CSS定位
  6. 第三课 选择器、模块化组件、伪类选择器
  7. java集合【9】——— ArrayList源码分析
  8. CSS样式表优先级及模块化原理及实现
  9. 请用Python手写实现插入排序

随机推荐

  1. 如何使用php通过AJAX从数据库中删除记录，
  2. 尝试将纬度和经度发布到数据库时，Android
  3. C标准库中的函数定义在哪里?
  4. Mysql 使用 select into outfile
  5. 检索每n行的最高值
  6. 如何在C中删除多个闪存地址？
  7. MySQL数据库引擎ISAM MyISAM HEAP InnoDB
  8. mysql 数据库中表不同 但是列名相同，怎么
  9. SQL从结果数据库中选择subCode及其得分，并
  10. 什么时候最推荐使用mysql_real_escape_st