<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<!-- 链接外部css -->
<link rel="stylesheet" type="text/css" href="lesson3_1.css">
<!-- 和下面的style效果相同 -->
<!-- <style type="text/css">
div{
width: 100px;
height: 100px;
background-color: green;
}
</style> -->
</head>
<body>
<!--
IE trident
Firfox Gecko
Google chrome Webkit/blink
Safari Webkit
Opera presto
-->
<!-- cascading style sheet 层叠样式表 -->
<!-- 1.引入css -->
<!-- (1)行间样式 -->
<div style=""></div>
<!-- （2）页面级标签<head><style> -->
<!-- （3）外部css -->
<!-- 选择器 -->
<!-- 1.id选择器 :一一对应-->
<div id="only">123</div>
<div id="only1">456</div>
<!-- 2.class ：一对多-->
<div class="demo demo1">789</div>
<div class="demo">dfa</div>
<!-- 3.标签选择器 -->
<span>123</span>
<div>
<span>234</span>
</div>
<!-- 4.通配符 -->
<span>123</span>
<div>567</div>
<!-- 选择器优先级:!important> id>class|属性选择器>标签选择器>通配符选择器-->
<div id="only1" class="demo">dfaklg</div>
<div style="background-color: red;" id="only1">faflaf</div>
</body>
</html>
/*css权重*/
/*!important infinity
行间样式 1000
id选择器 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
*/
/*标签选择器*/
div{
/*width: 100px;*/
/*height: 100px;*/
background-color: red;
/*border-radius: 50%;*/
}
/*id选择器*/
#only{
background-color: red;
}
#only1{
background-color: green;
}
/*class选择器*/
/*important提高优先级*/
.demo{
background-color: blue!important;
}
.demo1{
color: #fcc;
}
span{
color: #F40;
font-weight: bold;
}
/*通配符选择器*/
*{
background-color: yellow;
}
/*属性选择器*/
[id="only"]{
font-weight: bold;
background-color: #fcc;
}
[class]{
font-weight: bold;
}
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
