简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> List of blog posts> 选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使用方式（模块化元素组件）
Blogger Information
Blog 70
fans 4
comment 5
visits 103798
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
选择器优先级/前端组件样式模块化原理与实现/常用伪类选择器的使用方式（模块化元素组件）
JiaJieChen
Original
873 people have browsed it

一.选择器优先级

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

1.标签/元素选择器

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

2.class和id选择器

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

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

3.代码块

       
    
        
    2. 
        
  2. lang="en">
    3. 
        
    4. 
        
  4. charset="UTF-8"/>
    5. 
        
  5. http-equiv="X-UA-Compatible"content="IE=edge"/>
    6. 
        
  6. name="viewport"content="width=device-width, initial-scale=1.0"/>
    7. 
        
  7. </span><span class="pln">选择器优先级</span><span class="tag">
    8. 
        
  8. type="text/css">
    9. 
        
  9. *{
    10. 
        
  10. padding:0;
    11. 
        
  11. margin:0;
    12. 
        
  12. }
    13. 
        
  13. /* 1.标签/元素选择器
    14. 
        
  14. 标签选择器在style出现多个同名称元素属性也一样，样式则按照从上到下顺序进行变化 */
    15. 
        
  15. /* div {
    16. 
        
  16. border: 1px solid;
    17. 
        
  17. background: cyan;
    18. 
        
  18. }
    19. 
        
  19. div {
    20. 
        
  20. border: 1px solid;
    21. 
        
  21. background: lightpink;
    22. 
        
  22. }
    23. 
        
  23. div {
    24. 
        
  24. border: 1px solid;
    25. 
        
  25. background: limegreen;
    26. 
        
  26. } */
    27. 
        
  27. /* 2.class和id选择器 */
    28. 
        
  28. /* 由此可以看出class和id选择器权重大于标签选择器 */
    29. 
        
  29. /* #box1 {
    30. 
        
  30. border: 1px solid;
    31. 
        
  31. background: cyan;
    32. 
        
  32. }
    33. 
        
  33. .box {
    34. 
        
  34. border: 1px solid;
    35. 
        
  35. background: lightpink;
    36. 
        
  36. }
    37. 
        
  37. div {
    38. 
        
  38. border: 1px solid;
    39. 
        
  39. background: limegreen;
    40. 
        
  40. } */
    41. 
        
  41. /* 3.class和id选择器权重比较 */
    42. 
        
  42. /* 由此可以看出id选择器权重比class选择器还要大 */
    43. 
        
  43. #box1 {
    44. 
        
  44. border:1pxsolid;
    45. 
        
  45. background:cyan;
    46. 
        
  46. }
    47. 
        
  47. .box{
    48. 
        
  48. border:1pxsolid;
    49. 
        
  49. background:lightpink;
    50. 
        
  50. }
    51. 
        
  51. div{
    52. 
        
  52. border:1pxsolid;
    53. 
        
  53. background:limegreen;
    54. 
        
  54. }
    55. 
        
    56. 
        
  56. 

    57. 
        
    58. 
        
  58. id="box1"class="box">box1
  • box2
  • box3
  • box4
  • box5

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

    样式表 语法
    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标签中去改变每一行的样式

           
      
        
      2. 
        
      3. 
        
    3. style="background:plum">box1
  • style="background:lightpink">box2
  • style="background:lightsalmon">box3
  • style="color:rgb(250,250,250);background:rgb(98,212,31)">
  • box4
  • style="background:lightskyblue">box5

    • 2.内部样式表

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

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

      23.

    3.外部样式表（模块化）

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

    ①创建一个css文件

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

    ③html引入外部css文件

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

    3.代码块

           
      
        
      2. 
        
    2. lang="en">
      3. 
        
      4. 
        
    4. charset="UTF-8"/>
      5. 
        
    5. http-equiv="X-UA-Compatible"content="IE=edge"/>
      6. 
        
    6. name="viewport"content="width=device-width, initial-scale=1.0"/>
      7. 
        
    7. </span><span class="pln">外部样式表</span><span class="tag">
      8. 
        
    8. type="text/css">
      9. 
        
    9. /* @imoprt url 引入外部css文件 */
      10. 
        
    10. @importurl(外部样式表.css);
      11. 
        
      12. 
        
    12. 

      13. 
        
      14. 
        
      15. 
        
    15. “有规划的人生叫蓝图，没有规划的人生叫拼图。”
      16. 
        
      17. 
        
      18. 
        
      19.

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

    伪类 含义
    :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.:代码块

           
      
        
      2. 
        
    2. lang="en">
      3. 
        
      4. 
        
    4. charset="UTF-8"/>
      5. 
        
    5. http-equiv="X-UA-Compatible"content="IE=edge"/>
      6. 
        
    6. name="viewport"content="width=device-width, initial-scale=1.0"/>
      7. 
        
    7. </span><span class="pln">常用伪类选择器的使用方式</span><span class="tag">
      8. 
        
    8. type="text/css">
      9. 
        
    9. div{
      10. 
        
    10. border:1pxsolid;
      11. 
        
    11. width:400px;
      12. 
        
    12. text-align:center;
      13. 
        
    13. }
      14. 
        
      15. 
        
    15. /* 1.只要拿到了元素的入口，就可以用 伪类选择器：nth-of-type（n）元素里面的任何一个元素 */
      16. 
        
    16. /* #box > div:nth-of-type(2) {
      17. 
        
    17. background: aqua;
      18. 
        
    18. } */
      19. 
        
      20. 
        
    20. /*2. first-of-type 选择第一个元素 */
      21. 
        
    21. /* #box div:first-of-type {
      22. 
        
    22. background-color: pink;
      23. 
        
    23. } */
      24. 
        
    24. /* 3.last-of-type 选择最后一个元素 */
      25. 
        
    25. /* #box div:last-of-type {
      26. 
        
    26. background-color: red;
      27. 
        
    27. } */
      28. 
        
    28. /* 4.nth-last-of-type(2)选择倒数第二个元素 */
      29. 
        
    29. /* #box div:nth-last-of-type(2) {
      30. 
        
    30. border: seashell;
      31. 
        
    31. background: plum;
      32. 
        
    32. } */
      33. 
        
    33. /* 5.only-of-type 选择唯一的子元素 */
      34. 
        
    34. #box span:only-of-type {
      35. 
        
    35. background-color:plum;
      36. 
        
    36. }
      37. 
        
      38. 
        
    38. 

      39. 
        
      40. 
        
    40. id="box">
      41. 
        
    41. box1
      42. 
        
    42. box2
      43. 
        
    43. box3
      44. 
        
    44. box4
      45. 
        
    45. box5
      46. 
        
      47. 
        
      48. 
        
      49.
    Correcting teacher：天蓬老师天蓬老师

    Correction status：qualified

    Teacher's comments：极用心,非常棒,照这样的学习态度 ,不成功都难
    Statement of this Website
    The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
    All comments Speak rationally on civilized internet, please comply withNews Comment Service Agreement
    0 comments
    Author's latest blog post
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！