CSS 元素样式来源

　元素样式的来源

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello world
    <h1>hello world</h1>
</body>
</html>

1.默认样式: 用户代理样式,这是浏览器为每一个内置元素设置的默认样式

2.自定义: 用户自定义样式

h1 {
        color: red;
        background-color: yellow;
      }

style标签设置样式,适合于当前html文档

<style>
     h1 {
      color: red;
      background-color: yellow;
    }
  </style>

style属性: 行内样式,仅限于当前元素 <h1 style="color: green">hello php.cn</h1>
导入外部样式表
- <link rel="stylesheet" href="style.css" />
- <style>@import url(style.css);</style>

选择器

选择器: 用于选择页面中一个或多个元素的字符串

1.几乎所有的元素都可以使用的三大通用属性 style, id, class
- 属性id 选择器 [id="title"]{color: violet;} 简写成 #title{color: violet;}
- 属性 class选择器 [class="title"]{color: violet;} 简写成 .title{color: violet;}
- 标签选择器 h2{color: violet;}
2.选择器优先级
- 相同选择器会根据书写顺序后面写的会覆盖前面写的
- 不同选择器和书写的顺序无关与权重有关 !important > style属性 > id > class > tag
3.权重的计算方式

<body>
    <h3 id="a" class="b">Hello PHP.CN</h3>
    <style>
      /* 选择当前的h3有三种选择器:
        标签, class, id  */
      /* 将id,class,tag,想像成一个三位整数,初始为 0, 0 ,0 */
      /* 百位    十位     个数
         id      class   tag
         0       0       0 */
      /* 百位对应:id   十位对应:class   个位对应:tag  */
      /* 1,1,0 */
      /* #a.b {
        background-color: lightblue;
      } */
      /* 0, 1, 1 */
      h3.b {
        background-color: blue;
      }
      /* 0, 1, 0 */
      .b {
        background-color: cyan;
      }
      /* 0, 0 , 2  */
      body h3 {
        background-color: yellow;
      }
      /* 0, 0 , 1  */
      h3 {
        background-color: lightgreen;
      }
    </style>
</body>

上下文选择器
- 只能选中子元素 : > .list > li { border: 1px solid rgb(150, 56, 56);}
- 后代元素都能选中 : 空格 .list li { border: 1px solid #000;}
- 相邻兄弟/next/下一个 : + .list .item + li { background-color: cyan;}
- 所有兄弟元素 : ~ .list .item ~ li { background-color: cyan;}

元素样式的来源

选择器

更多相关文章

随机推荐