首页 > Web开发 > 详细

html基础-css-选择器

时间:2018-01-14 15:43:04      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:xxx   lang   ont   head   引入   优先   type   height   但是   

<!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>-->
<!--顺序 先引用&#45;&#45;这里是为了测试优先级 所以选择器都是使用的i1-->
<!--1、 标签中css style属性 优先级最高 也就是div后面的优先级别是最高的-->
<!--2、引入的css和head中的style中的标签的优先级 主要是看在head中是由下往上一次查找 那个在最下面就先被引用-->

<!--id选择器不能重复 但是class是可以重复的-->

<!--<div class="c1"></div> class选择器-->
<!--<div class="c1"></div>-->

<!--<div></div> /*标签选择器*/-->

<!--<div>-->
<!--行内标签无法应用 宽 高 &#45;&#45;层级选择器-->
<!--<span>1</span>-->
<!--</div>-->

<!--<div> class层级选择器-->
<!--行内标签无法应用 宽 高 &#45;&#45;层级选择器-->
<!--<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>

html基础-css-选择器

标签:xxx   lang   ont   head   引入   优先   type   height   但是   

原文:https://www.cnblogs.com/zunchang/p/8283382.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号