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

css初识:元素的样式来源,选择器类型及权重

程序员文章站 2022-04-08 18:22:35
...

CSS初识

一、元素的样式来源

1、用户代理样式(浏览器默认样式)

2、自定义样式

  • 行内样式(内联样式):直接作用到当前元素,优先级大于内部样式。
    例:<div style="color:red">行内样式</div>
  • 内部样式(文档样式):用于当前文档。
    例:

    1. <style>
    2. div{
    3. color: red;
    4. width: 100px;
    5. }
    6. </style>
  • 外部样式表:在多个文档中样式复用。
    <link rel="stylesheet" href="css/style.css" />

  • 自定义样式优先级:行内样式>内部样式>外部样式

  • 样式来源,除了与优先级相关,还有书写顺序相关。后面覆盖前面。

3、继承样式

  • 子元素可以使用样式可以使用inherit属性继承父元素样式。例如:color:inherit;
  • 通常颜色,字体,字号等可以被继承,并非所有样式都可以被继承,盒模型的属性不能被继承。
  • 继承样式优先级<用户代理样式。

二、实例演示样式选择器

1、基本选择器:根据元素自身特点来选择

  • 标签选择器:选用标签,例:h2{color:red};
  • 属性选择器:id,class是高频属性。id用于唯一元素,class用于多个元素。id可以简化用#号表示,class简化用.表示。推荐使用class.
  • 群组选择器:中间使用,分割:h2#a,h2.b {background-color: cadetblue;}
  • 通配选择器:*,可以使用!important进行提权。
    例:
    1. <h2>标签选择器</h2>
    2. <h2 title="hello">属性选择器</h2>
    3. <h2 id="a">属性选择器</h2>
    4. <h2 class="b">属性选择器</h2>
    5. <style>
    6. h2 {
    7. color: red;
    8. }
    9. /* 标签选择器 */
    10. h2[title="hello"] {
    11. color: black;
    12. }
    13. /* 属性选择器 */
    14. h2#a{
    15. color:color: blue;
    16. }
    17. /* id简化可用# */
    18. h2.b{
    19. color:color: blue;
    20. }
    21. /* class简化可用# */
    22. h2#a,h2.b {
    23. background-color: cadetblue;
    24. }
    25. /* 群组选择器,中间使用,分割 */
    26. html body * {
    27. background-color: chartreuse !important;
    28. }
    29. /* 通配选择器,可以使用!important进行提权*/
    30. </style>

    2、上下文选择器(层级选择器)

  • 子元素使用>,例:.list > li{color:red;}
  • 后代(后级)元素使用” “空格。例:.list li{color:red;}
  • 相邻兄弟使用+,例:.item.second + *{background-color:red;}
  • 选择后面所有兄弟元素使用~,例:.item.second ~ *{background-color:red;}
    1. <ul class="list">
    2. <li class="item">item1</li>
    3. <li class="item">
    4. <ul>
    5. <li>item2-1</li>
    6. <li>item2-2</li>
    7. <li>item2-3</li>
    8. </ul>
    9. </li>
    10. <li class="item three">item3</li>
    11. <li class="item">item4</li>
    12. <li class="item five">item5</li>
    13. <li class="item">item6</li>
    14. <li class="item">item7</li>
    15. <li class="item">item8</li>
    16. </ul>
    17. <style>
    18. .list li {
    19. border: 1px solid yellow;
    20. }
    21. /* 子元素使用空格选择 */
    22. .list > li {
    23. border: 1px solid red;
    24. }
    25. /* 后代元素使用>进行选择 */
    26. .item.three + * {
    27. background-color: red;
    28. }
    29. /* 相邻兄弟元素使用+,li也可以写成* */
    30. .item.five ~ * {
    31. background-color: blue;
    32. }
    33. /* 选择后面所有兄弟元素使用~ */
    34. </style>
    css初识:元素的样式来源,选择器类型及权重

    三、选择器的权重

    1、权重的计算方式

  • css将id,class,tag看成一个三位数,id对应百位,class对应十位,tag对应个位。
  • 从右往左,第1位:标签数量,第2位class数量,第3位id数量。
例子 第三位 第二位 第一位 权重
h1{color:red;} 0 0 1 0 0 1
body h1{color:red;} 0 0 2 0 0 2
body h1.a{color:red;} 0 1 2 0 1 2
body h1.a#b{color:red;} 1 1 2 1 1 2

2、注意问题

  • 相同的权重,位置决定样式,后面覆盖前面。
  • !important 权重最大,常用于检查测试。
  • id权重较高,容易样式最终难以覆盖,建议尽可能使用class,使代码更具弹性。
  • 标签数量太少,不可以随意命名,不如class可以自定义命名。