css样式 来源 规则 选择器权重

样式来源

用户代理样式（浏览器的默认样式）

element（自定义样式）

• style 设置自定义样式
• style 级别：行内样式大于内部及文档样式

1. 行内样式：级别最高 style=”….”;

2. 文档样式（内部样式）：<style></style>

3. 浏览器默认样式

4. 继承样式

查询 :找到要被添加的选择器

1. selector ：选择器（找到要被添加样式的元素）

• 标签选择器 ：根据标签名设置选择器h1 : 标签选择器

为匹配的元素 ，设置样式规则

• {} 用{}括起样式规则：使用“键值对” 表示

  
  
    选择器{
        一个或多个样式生命
    }
  

• css 工作流程： 1- 找到元素； 2-设置元素样式

选择器

基本选择器：根据元素自身特点来选择

<h1> item1 </h1>
<h2 title="hello"> item2 </h2>
<h3 id="a">item3</h3>
<h4 class="b">item4</h3>

• 标签选择器

  
  
  h1{
     color:red;
  }
  

• 属性选择器

 h2[title="hello"]{
     color:green;
 }

  h3[id="a"]{
     color:blue;
 }
   h4[class"b"]{
     color:violet;
 }

/* id和class 为高频属性 可以用#和.代替 */
   h3#a{
     color:blue;
 }
   h4.b{
     color:violet;
 }

• 群组选择器

   h3#a,h4.b {
     color:blue;
 } 
/*  同时选择h3和h4标签*/

• 通配符选择器

  html body * {
     color:blue;
 } 
/*  html 下的 body 下的所有标签属性*/

• 上下文选择器(层级选择器)

<ul class="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
        <ul class="inner">
            <li>item3-1</li>
            <li>item3-2</li>
            <li>item3-3</li>
        </ul>
    <li class="item seconsd">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
</ul>

1. 下级元素：用空格

  .list li {
     color:blue;
 } 
/*  空格 为选中.list下面的所有li标签(包括下一代的li标签)*/

1. 子元素：用 > 号

  .list > li {
     color:blue;
 } 
/*  > 只为选中.list下面的li标签 （不包括下一代的li标签）*/

1. 连续两个类：用. 符号（不能加空格）

 <li class="item second"> item2</li>

  .item.seconsd {
     color:blue;
 } 
/*  class里面用空格分开 css里面用.连接（不能加空格）*/

1. 相邻兄弟：+号

  .item.seconsd + * {
     color:blue;
 } 
/*  当前选择器的下面的一个标签*/

  .item.seconsd ~ * {
     color:blue;
 } 
/*  当前选择器的下面的所有相邻的标签（*/

选择器的权重

• 三个权重的位置
  1.标签数量
  2.class数量
  3.id数量

  
  body h1.title{
    color:red;
  }
  /* 两个标签（body和h1）一个class（.title） 0.1.2*/
  body h1{
    color:red;
  }
  /* 两个标签（body和h1） 0.0.2*/
  

  id为百位 class 为十位 tag 为个为
  最高权重!importan