外部css文件与html关联

根据web标准结构,样式,行为相分离,会使用外部引用.

外部css文件与html关联

1. id关联(适用于一一对应)
   html中:
   <div id="one">一号</div>
   css中:
   #one{background-color: blue;}
   
2. class关联(可用于多对多)
   html中:
   <div class="one two">一号</div>
<div class="one">1号</div>
   css中:
   .one{background-color: blue;}
.two{color: #F40;}
   
3. 标签关联:
   html中:
   <div>一号</div>
   css中:
   div{color:#F40;}
   
4. 父子标签关联:
   html中:
   <div>
<em>
<span>inner</span>
</em>
</div>
<span>outer</span>

   css中:
   em span{color:#F40;}
   或
   div span{color:#F40;}结果一样
   
5. 直接子元素
   <div>
<em>son</em>
<span>
<em>inner</em>
</span>
</div>
<span>outer</span>

   css中:
   div > em{color:#F40;}(作用对象为son)
   
6. 并列关联
   html中:
   <div>一号</div>
<div class="one">one</div>
<p class="one">1</p>
   css中:
   div.one{color:#F40;}
   
7. 多组关联
   html中:
   <div>1</div>
<em>2</em>
<p>3</p>
   css中:
   div,em,p{color:#F40;}

以上关联方式优先性:!important>行间样式(html标签中使用style属性)>id>class>标签>伪元素>通配符(*).