一、选择器的优先级

实例演示选择器的优先级,id,class,tag

CSS 选择器简述
tag 选择器标签名称 {}，为相同标签设定统一的样式
class 选择器.class 名称 {}， 为相同类名标签设定统一的样式
id 选择器#id 名称 {}，为相同 id 标签设定统一的样式

1.tag 选择器，优先级相同时，书写顺序决定优先级

  • 效果图：

优先级相同

  • 代码：
  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.       /* 0,0,3 */
  10.       html body h1 {
  11.         color: yellow;
  12.       }
  14.       /* 0,0,3 */
  15.       html body h1 {
  16.         color: red;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <h1>HelloWord</h1>
  22.   </body>
  23. </html>

2.class 选择器优先级大于 tag 选择器

  • 效果图：

class 与 tag 优先级

  • 代码：
  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>class选择器与tag选择器优先级</title>
  8.     <style>
  9.       /* 0,0,3 */
  10.       body h1.active {
  11.         color: yellow;
  12.       }
  14.       /* 0,0,3 */
  15.       body h1 {
  16.         color: red;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <h1 class="active">HelloWord</h1>
  22.   </body>
  23. </html>

3.id 选择器优先级大于 class 选择器

  • 效果图：

id 与 class 优先级

  • 代码：
  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>id选择器与class选择器优先级</title>
  8.     <style>
  9.       /* 0,1,2 */
  10.       body h1#first {
  11.         color: yellow;
  12.       }
  14.       /* 0,1,1 */
  15.       body h1.active {
  16.         color: red;
  17.       }
  18.     </style>
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <h1 class="active" id="first">HelloWord</h1>
  23.   </body>
  24. </html>

class 选择器>tag 选择器。" class="reference-link">总结：三种选择器优先级：id 选择器>class 选择器>tag 选择器。

二、前端组件样式模块化的原理与实现

实例演示前端组件样式模块化的原理与实现

1.行内样式表

  • 只能设定一个标签的样式，使用较少
  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.   </head>
  9.   <body>
  10.     <header style="height: 4rem; background-color: #ddd">我是页眉</header>
  11.     <main style="height: 15rem; background-color: lightcyan">我是主体</main>
  12.     <footer style="height: 6rem; background-color: #999">我是页脚</footer>
  13.   </body>
  14. </html>

2.内部样式表

  • 可以设定一个 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.       header {
  10.         height: 4rem;
  11.         background-color: #ddd;
  12.       }
  14.       main {
  15.         height: 15rem;
  16.         background-color: lightcyan;
  17.       }
  19.       footer {
  20.         height: 6rem;
  21.         background-color: #999;
  22.       }
  23.     </style>
  24.   </head>
  25.   <body>
  26.     <header>我是页眉</header>
  27.     <main>我是主体</main>
  28.     <footer>我是页脚</footer>
  29.   </body>
  30. </html>

3.外部样式表

  1. 可以设定整个项目的样式，使用最多
  2. 有两种引入方式，@import 引入 和 link 标签引入，后者使用较多
  • 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.     <link rel="stylesheet" href="css/mkh.css" />
  8.     <title>外部样式表</title>
  9.     <style>
  10.       /* @import url(css/mkh.css); */
  11.     </style>
  12.   </head>
  13.   <body>
  14.     <header>我是页眉</header>
  15.     <main>我是主体</main>
  16.     <footer>我是页脚</footer>
  17.   </body>
  18. </html>
  • css：
  1. header {
  2.   height: 4rem;
  3.   background-color: #ddd;
  4. }
  6. main {
  7.   height: 15rem;
  8.   background-color: lightcyan;
  9. }
  11. footer {
  12.   height: 6rem;
  13.   background-color: #999;
  14. }
效果图：（几种样式表效果图相同）

id 与 class 优先级

总结：通过模块化 CSS 样式表，使得代码的可读性更强，结构更清晰，样式的设定更加灵活。

三、常用伪类选择器的使用方式

实例演示常用伪类选择器的使用方式，并用伪类来模块化元素组件(例如表单或列表）

1.结构伪类：选择子元素，要有一个父元素作为查询起点，可匹配任何位置元素，使用较少

  • 公式：

  • n = (0,1,2,3,4…)

  1. .list > li:nth-child(Xn + y)
  • 效果图：

结构伪类选择器

  • 实现代码：
  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标签内部第三个标签样式 */
  10.       .list > :nth-child(3) {
  11.         background-color: lightblue;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <ul class="list">
  17.       <li>item1</li>
  18.       <p>item2</p>
  19.       <li>item3</li>
  20.       <p>item4</p>
  21.       <li>item5</li>
  22.       <p>item6</p>
  23.       <li>item7</li>
  24.       <p>item8</p>
  25.       <li>item9</li>
  26.       <p>item10</p>
  27.     </ul>
  28.   </body>
  29. </html>

2.分组伪类结构选择器，推荐使用

  • 效果图：

分组伪类结构选择器

  • 实现代码：
  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.       /* 选择任何一个 :nth-of-type(n)  */
  10.       /* 选中第3个li */
  11.       .list > li:nth-of-type(3) {
  12.         background-color: red;
  13.       }
  14.       /* 选中第1个P  */
  15.       .list > p:nth-of-type(2) {
  16.         background-color: yellow;
  17.       }
  19.       /* 选择第一个 :first-of-type */
  20.       /* 选中第1个li  */
  21.       .list > li:first-of-type {
  22.         background-color: brown;
  23.       }
  25.       /* 选择最后一个 :last-of-type */
  26.       /* 选中第1个p  */
  27.       .list > p:last-of-type {
  28.         background-color: violet;
  29.       }
  31.       /* 选择倒数某一个 :nth-last-of-type(n) */
  32.       /* 选中倒数第2个li  */
  33.       .list > li:nth-last-of-type(2) {
  34.         background-color: pink;
  35.       }
  37.       /* 选择唯一子元素的元素 :only-of-type */
  38.       /* 选中唯一li的ul  */
  39.       ul > li:only-of-type {
  40.         background-color: #ccc;
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <ul class="list">
  46.       <li>item1</li>
  47.       <p>item2</p>
  48.       <li>item3</li>
  49.       <p>item4</p>
  50.       <li>item5</li>
  51.       <p>item6</p>
  52.       <li>item7</li>
  53.       <p>item8</p>
  54.       <li>item9</li>
  55.       <p>item10</p>
  56.     </ul>
  58.     <ul>
  59.       <li>item</li>
  60.     </ul>
  61.   </body>
  62. </html>

总结：分组伪类结构选择器，分为以下几种：

分组伪类结构选择器说明
:nth-of-type(n)选择任何一个
:first-of-type选择第一个
:last-of-type选择最后一个
:nth-last-of-type(n)选择倒数某一个
:only-of-type选择唯一子元素的元素

更多相关文章

  1. css选择器优先级、伪类选择器的使用和模块化样式
  2. 代码中的Thread.sleep(0) 有什么意义？是写错了吗？
  3. 210322 CSS 样式与选择器
  4. 【CSS入门】学习CSS盒模型及常用样式属性详解（整理）
  5. 10 个最佳实践来改良你的 CSS
  6. CSS学习（一）
  7. CSS选择器讲解
  8. 样式选择器、组件模块化及伪类选择器的用法演练
  9. 浅谈CSS选择器以及伪类选择器模块化

随机推荐

  1. (翻译)又一个Android Sqlite库: Cupboard
  2. Android高手进阶教程(三)之----Android
  3. Android编译系统makefile(Android.mk)说
  4. TabHost与RadioGroup结合完成的菜单
  5. 数据存储和界面笔记
  6. 【Android】Android上的Jetty
  7. Android的相对布局属性的解释
  8. Android学习之 UI效果
  9. 学习资源推荐
  10. Android之Actionbar顶部标签的使用