<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!-- 指定编码 -->
<title>liudaozhang</title>
<link rel="shortcut icon" href="http://www.xxxxx.cn:80/wp-content/logo.jpg">
<!--<link rel="stylesheet" href="jjj.css"> 这是第三种___引入css-->
<!--<link rel="stylesheet" href="jjj2.css"> 这是第三种___引入css-->
<style>
/*id选择器 这是第二种方式*/
/*#i1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*这里会先引用style中的标签，然后在引用link中jjj2 再试jjj中的标签*/
/*class选择器*/
/*.c1{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*标签选择器*/
/*div {*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*标签层级选择器 --行内标签无法应用 宽 高等属性*/
/*div span{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*class层级选择器*/
/*.c2 span{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*id层级选择器*/
/*#i2 span{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*}*/
/*id组合选择器*/
/*#i1,#i2,#i3{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*margin-top: 5px; 间隔作用*/
/*}*/
/*class组合选择器*/
/*.c1,.c2,.c3{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*margin-top: 5px;*/
/*}*/
/*属性选择器*/
/*div[jjj='abc']{*/
/*height: 100px;*/
/*width: 100px;*/
/**/
/*margin-top: 5px;*/
/*}*/
</style>
</head>
<body>
<!--1、可以在任意标签中添加style属性，增加css样式-->
<!--<div style="height: 100px;width: 100px;border:red 2px solid;"></div>-->
<!--<div id="i1"></div> 引入i1选择器-->
<!--2、head中style添加css样式-->
<!--理解：在标签当中增加了一个id的属性 他的属性就是i1 在head中通过style标签，以id选择器的方式 #i1写了一个css样式 他引用到了div这个标签上-->
<!--简单的说 就是在head中写了id选择器i1 写了css样式 在后面的div标签中引用了这个-->
<!--3、引入 css-->
<!--<div id="i2"></div> 引入i2选择器-->
<!--选择器在是唯一的 不能重复 重复就会报错-->
<!--测试三种引入css样式的方式的优先级-->
<!--<div id="i1" style="height: 100px;width: 100px;"></div>-->
<!--顺序 先引用--这里是为了测试优先级 所以选择器都是使用的i1-->
<!--1、 标签中css style属性 优先级最高 也就是div后面的优先级别是最高的-->
<!--2、引入的css和head中的style中的标签的优先级 主要是看在head中是由下往上一次查找 那个在最下面就先被引用-->
<!--id选择器不能重复 但是class是可以重复的-->
<!--<div class="c1"></div> class选择器-->
<!--<div class="c1"></div>-->
<!--<div></div> /*标签选择器*/-->
<!--<div>-->
<!--行内标签无法应用 宽 高 --层级选择器-->
<!--<span>1</span>-->
<!--</div>-->
<!--<div> class层级选择器-->
<!--行内标签无法应用 宽 高 --层级选择器-->
<!--<div class="c2">-->
<!--<span>12222</span>-->
<!--</div>-->
<!--</div>-->
<!--<div> id层级选择器-->
<!--<div id="i2">-->
<!--<span>2222</span>-->
<!--</div>-->
<!--</div>-->
<!--<div id="i1"></div> id组合选择器-->
<!--<div id="i2"></div>-->
<!--<div id="i3"></div>-->
<!--<div class="c1"></div> class组合选择器-->
<!--<div class="c2"></div>-->
<!--<div class="c3"></div>-->
<!--<div jjj="abc"></div> 属性选择器-->
</body>
</html>
