欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css样式和选择器的使用方法

程序员文章站 2023-12-28 08:23:04
...

一、实例演示样式的来源

1.用户代理样式

  • 当 html 标签没有明确指定样式的时候，浏览器会默认生成样式；即用户代理样式，或着称之为浏览器默认样式 。

html 代码：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <a href="http://php.cn">祝越办越好</a>
    11. 

  11.   </body>
    12. 

  12. </html>
    13.

浏览器生成用户代理样式：

    

  1. body {
    2. 

  2.     display: block;
    3. 

  3.     margin: 8px;
    4. 

  4. }
    5.

2.用户自定义样式

用户自定义样式分为：

  • 行内样式
  • 文档样式
  • 外链样式 ####行内样式
  • <p style="color: red"></p>

文档样式

    

  1. <style>
    2. 

  2.    p {
    3. 

  3.      color: rgb(111, 0, 255);
    4. 

  4.    }
    5. 

  5.  </style>
    6.

外部样式

<link rel="stylesheet" href="sytle.css" />

二、实例演示基本选择器、上下文选择器

1.基本选择器

  • 标签选择器
    

  1. a {
    2. 

  2.  color: red;
    3. 

  3.  }
    4.
  • 2.属性选择器
    

  1. h2[title="hello"] {
    2. 

  2.         color: green;
    3. 

  3.       }
    4. 

    5. 

  5. h2.b {
    6. 

  6.         color: orange;
    7. 

  7.       }
    8. 

    9. 

  9. h2#a,
    10. 

  10.       h2.b {
    11. 

  11.         background-color: yellow;
    12. 

  12.       }
    13.
  • 3.群组选择器
    

  1.       h2#a,
    2. 

  2.       h2.b {
    3. 

  3.         background-color: yellow;
    4. 

  4.       }
    5.
  • 4.通配选择器
    

  1. html body * {
    2. 

    3. 

  3.         background-color: gray !important;
    4. 

  4.       }
    5. 

  5.       /* !important: 瞬间提权到100%  */
    6.

2.上下文选择器

    

    2. 

  2.    <style>
    3. 

  3.       /* 1. 子元素f > */
    4. 

  4.       .list > li {
    5. 

  5.         border: 1px solid #000;
    6. 

  6.       }
    7. 

    8. 

  8.       /* 2. 后代元素: 空格 */
    9. 

  9.       .list li {
    10. 

  10.         border: 1px solid #000;
    11. 

  11.       }
    12. 

    13. 

  13.       /* 3. 相邻兄弟: +  */
    14. 

  14.       .item.second + * {
    15. 

  15.         background-color: lightcyan;
    16. 

  16.       }
    17. 

    18. 

  18.       /* 4. 所有兄弟: ~  */
    19. 

  19.       .item.second ~ * {
    20. 

  20.         background-color: yellow;
    21. 

  21.       }
    22. 

  22.     </style>
    23.

三、选择器的权重

id 权重>class 权重>标签权重
三个权重的位置, 从右到左 0(id).0(class).0(标签)

    

  1.   第1位: 标签数量
    2. 

  2.   第2位: class数量
    3. 

  3.   第3位: id数量 */
    4.

  • css 将 id, class, tag 看成一个”三位整数”, id -> 百位, class -> 十位, tag -> 个位

  • id : 为什么不推荐用? 因为权重太高, 为了让你的代码具有弹性,尽可能用 class

  • 为什么不用权重最低的标签呢? 只是标签的数量太少了, 而 class 可以任何命名

上一篇：

下一篇：

推荐阅读