CSS选择器
2018-12-03 本文已影响0人
DARKSIIIDE
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style type="text/css">
/*div{
width:100px;
height:100px;
background-color:green;
}*/
</style>
</head>
<body>
Ctr+/ 注释的快捷键
一.引入CSS
1.行间样式
<div style="width:100px;height: 100px;background-color: red;">1</div>
</body> -->
2.页面级CSS
<div></div> 接head中style
3.外部css文件
CSS文件 head中的link标签
二.选择器
1.id 特点：一对一
<div id="only">123</div>
2.class选择器 特点：多对多
<div class="demo">123</div>
<div class="demo demo1">234</div>
3.标签选择器
<span>123</span>
<div>
<span>234</span>
</div>
4.通配符选择器
全局，所有标签全适配
5.属性选择器
<div id="only">123</div>
<div id="only1">234</div>
[id]代表选中所有id选择器
只给第一个加东西就写[id="only"]
优先级：!important > 行间样式 > id选择器 > class选择器 = 属性选择器 > 标签选择器 > 通配符选择器
等级相同的选择器谁在前谁的优先级更高
!important的用法：background-color:green!important
三.CSS权重
!important Infinity
行间样式 1000
id选择器 100
class/属性/伪类 10
标签/伪元素 1
通配符选择器 0
这些数是256进制
四.外部文件CSS代码
#only{
background-color: red;
}
.demo{
background-color: yellow;
}
.demo1{
color:#f40;
}
span{
color: blue;
font-size: bold;
}
*{
background-color: green；
}
[id]{
background-color: pink;
}
