PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使用方式(模块化元素组件)

选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使用方式(模块化元素组件)

JiaJieChen
JiaJieChen 原创
2021年03月23日 16:28:46 831浏览

一.选择器优先级

选择器 语法
id选择器 语法是 #+di名称{} id选择器与元素属性选择器不同的是,id选择器选择id的时候需要在前面加上#号
class选择器 语法是 .+类名称{} class选择器的前缀名是英文句号.可以给不同的属性改变样式只要是类名一致就行
标签/元素选择器 语法是 元素名称+{}元素选择器是找到或选择到相同类型的元素去改变内部样式,如果不是同类元素则不会改变基本样式

1.标签/元素选择器

元素标签优先级: 标签选择器在style出现多个同名称元素属性也一样,样式则按照从上到下顺序进行变化

2.class和id选择器

由此可以看出class和id选择器权重大于标签选择器,那么class和id选择器谁大谁小呢?请看下图

由此可以看出id选择器权重比class选择器还要大,因此我们可以得出一个结论:id选择器>class选择器>标签/元素选择器

3.代码块

  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 type="text/css">
  9. * {
  10. padding: 0;
  11. margin: 0;
  12. }
  13. /* 1.标签/元素选择器
  14. 标签选择器在style出现多个同名称元素属性也一样,样式则按照从上到下顺序进行变化 */
  15. /* div {
  16. border: 1px solid;
  17. background: cyan;
  18. }
  19. div {
  20. border: 1px solid;
  21. background: lightpink;
  22. }
  23. div {
  24. border: 1px solid;
  25. background: limegreen;
  26. } */
  27. /* 2.class和id选择器 */
  28. /* 由此可以看出class和id选择器权重大于标签选择器 */
  29. /* #box1 {
  30. border: 1px solid;
  31. background: cyan;
  32. }
  33. .box {
  34. border: 1px solid;
  35. background: lightpink;
  36. }
  37. div {
  38. border: 1px solid;
  39. background: limegreen;
  40. } */
  41. /* 3.class和id选择器权重比较 */
  42. /* 由此可以看出id选择器权重比class选择器还要大 */
  43. #box1 {
  44. border: 1px solid;
  45. background: cyan;
  46. }
  47. .box {
  48. border: 1px solid;
  49. background: lightpink;
  50. }
  51. div {
  52. border: 1px solid;
  53. background: limegreen;
  54. }
  55. </style>
  56. </head>
  57. <body>
  58. <div id="box1" class="box">box1</div>
  59. <div>box2</div>
  60. <div>box3</div>
  61. <div>box4</div>
  62. <div>box5</div>
  63. </body>
  64. </html>

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

样式表 语法
link外部样式表 外部样式表link是标签是在head内部使用,引入css样式 rel是必须要输入的属性 内容是stylesheet表示引入的是一个css样式表文件,type填text/css说明是标准固定的css文件,href属性表示的是css文件路径 引入html外部的css文件
@impord外部样式表 url()内部输入css文件路径
style=””内部样式表 内部样式表 style type=”text/css”是写在 head中
style=””行内样式表 行内样式表 style 不同的是是写在body 行元素中

1.行内样式表

行内样式表我们把style写在body标签中去改变每一行的样式

  1. <body>
  2. <!-- 行内样式表我们把style写在body标签元素中去改变每一行的样式 -->
  3. <div style="background: plum">box1</div>
  4. <div style="background: lightpink">box2</div>
  5. <div style="background: lightsalmon">box3</div>
  6. <div style="color: rgb(250, 250, 250); background: rgb(98, 212, 31)">
  7. box4
  8. </div>
  9. <div style="background: lightskyblue">box5</div>
  10. </body>

2.内部样式表

内部样式表是把style写在head里面,可以定义元素的样式,可以用选择器选择属性去改变样式,我用了元素选择器,id选择器,class选择器

  1. <head>
  2. <meta charset="UTF-8" />
  3. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  5. <title>内部样式表</title>
  6. <style type="text/css">
  7. /* 内部样式表是把style写在head里面,可以定义元素的样式,可以用选择器选择属性去改变样式 */
  8. div {
  9. border: 1px solid;
  10. width: 300px;
  11. height: 2em;
  12. text-align: center;
  13. background: lightpink;
  14. }
  15. .box {
  16. background: limegreen;
  17. }
  18. #box1 {
  19. background: red;
  20. }
  21. </style>
  22. </head>

3.外部样式表(模块化)

这里采用的是内部样式表,可以看到在一段文字中,加入了太多样式会觉得看起代码来很复杂,接下来我们用外部样式表看看如何去简化我们的代码

①创建一个css文件

②把写好的样式放到css文件中

③html引入外部css文件

这里我们用@import url()引入外部的css文件,就可以把我们的样式给引入进去啦,这样代码看起来会更简洁!!!

3.代码块

  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 type="text/css">
  9. /* @imoprt url 引入外部css文件 */
  10. @import url(外部样式表.css);
  11. </style>
  12. </head>
  13. <body>
  14. <div>
  15. <p>“有规划的人生叫蓝图,没有规划的人生叫拼图。”</p>
  16. </div>
  17. </body>
  18. </html>

三.常用伪类选择器的使用方式(模块化元素组件)

伪类 含义
:nth-of-type(n) 选择任何一个元素
:first-of-type 选择第一个元素
:last-of-type 选择最后一个元素
:nth-last-of-type() 选择倒数某一个元素
:only-of-type 唯一子元素的元素

1.:nth-of-type(n),选择任何一个元素

只要拿到了元素的入口,就可以用 伪类选择器:nth-of-type(n)元素里面的任何一个元素

2.:first-of-type,选择第一个元素

:first-of-type 选择第一个元素

3.:last-of-type,选择第最后一个元素

:last-of-type 选择最后一个元素

4.nth-last-of-type(),选择倒数某一个元素

:nth-last-of-type(2)选择倒数第二个元素

4.:only-of-type,唯一子元素的元素

:only-of-type 选择唯一的子元素

5.:代码块

  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 type="text/css">
  9. div {
  10. border: 1px solid;
  11. width: 400px;
  12. text-align: center;
  13. }
  14. /* 1.只要拿到了元素的入口,就可以用 伪类选择器:nth-of-type(n)元素里面的任何一个元素 */
  15. /* #box > div:nth-of-type(2) {
  16. background: aqua;
  17. } */
  18. /*2. first-of-type 选择第一个元素 */
  19. /* #box div:first-of-type {
  20. background-color: pink;
  21. } */
  22. /* 3.last-of-type 选择最后一个元素 */
  23. /* #box div:last-of-type {
  24. background-color: red;
  25. } */
  26. /* 4.nth-last-of-type(2)选择倒数第二个元素 */
  27. /* #box div:nth-last-of-type(2) {
  28. border: seashell;
  29. background: plum;
  30. } */
  31. /* 5.only-of-type 选择唯一的子元素 */
  32. #box span:only-of-type {
  33. background-color: plum;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="box">
  39. <div>box1</div>
  40. <div>box2</div>
  41. <div>box3</div>
  42. <div>box4</div>
  43. <span>box5</span>
  44. </div>
  45. </body>
  46. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议