search

博客列表 >CSS：选择器优先级、前端组件样式模块化原理实现、常用伪类选择器使用方式

CSS：选择器优先级、前端组件样式模块化原理实现、常用伪类选择器使用方式

逝去
逝去原创
2021年03月26日 00:09:27665浏览

一、选择器的优先级

实例演示选择器的优先级,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>

总结：三种选择器优先级：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 选择唯一子元素的元素
上一条：gin(6)-模板渲染下一条：flex容器中的四个属性的功能演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议