选择器总结
什么是选择器
除了内联样式（用style属性描述的），对于样式的描述
#tt{
font-size:24px;
}
div{
background-color:red;
}
样式包括两部分：即选择器和样式内容
样式内容：是键值对形式描述样式的细节描述，比如字体大小、颜色、高度
选择器：描述后面的样式施加到哪些目标，或者说是 根据某个依据来选择应用样式目标
根据选择依据的不同，就产生了各种不同的选择器。
元素选择器
按照标签（元素）的名称来选择相应的目标（即标签的名字来选择）
div{
background-color：blue；
}
id选择器
根据元素的id属性来选择，比方下列中的选择器就是选中id=“tt”的目标，书写格式为#idname
#tt{
font-size:24px;
}
类选择器
根据元素的class属性来选择，比方下列中的选择器就是选中class=“tt”的目标，书写格式为.classname
.tt{
font-size:24px;
}
属性选择器
根据属性特征来选择应用的样式，所以从这个意义上来讲，它包含了id，class选择器
[title]:选择设置了title属性的元素
[title^=”tt”]:选择了title属性以”tt”开头的元素
[title$=”tt”]:选择了title属性以”tt”结尾的元素
[title ~=”tt”]:选择了title属性包含完整”tt”单词的元素
[title*=”tt”]:选择了title属性等于”tt”的元素
关系选择器：
根据元素见的家族关系来选择目标
E F ：在选择器E选中的目标中再去选中后代满足F选择器的目标（即空格 所有后代）
E > F直接后代
E + F大弟弟即第一个弟弟
E~F所有弟弟
伪类、伪元素
伪元素：其效果与增加一个元素来实现的效果等价，所以称为伪元素
伪类：其效果与增加一个类来实现的效果等价，所以称为伪类
组合选择器：多个选择器使用同一种样式描述，以逗号隔开
定位相关复习
（1）文档流：就是HTML的布局机制。块元素（block）独占一行，内联元素（inline）不独占一行。
（2）相对定位：相对于一个东西来定位。这东西就是它本身。同时可以用left 、top、bottom、right来移动元素的位置
相对定位不会脱离文档流
（2）绝对定位：找一个东西相对来决定定位。这个东西又是什么呢？这个东西（element）必须设定position，并且定位方式非static。
简单来说这个小鬼（element）定位可以是他爷爷、他太公.....（祖宗即body）
中有钱（position absolute）或者当官（position：relative，fixed）
就是不能是程序员（position：static或者直接没有写定位）
注意：绝对定位脱离文档流。一般使用“父相子绝”
使用绝对定位设置top：0和不设置top属性有啥区别
有区别。如果没有设置top属性，元素的位置和脱离文档流的位置是一样的
（3）fixed定位：就是相对于浏览窗口的定位
使用了position属性，一般不使用margin，padding属性
浮动（float）
通过设定float（浮动），可以使得元素从原本的文档流中脱离出来，感觉就像浮在原本的文件上
上面的案例用div+CSS实现了另一种布局方式
clear：用于清除浮动
4CSS三大特性
4.1继承
子代可以直接使用父代的某些样式（特征），当然有些可以继承，有些不能继承。比如人可以从父母继承姓氏、肤色，但是性格不能继承。
#div1{
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<div id="div1">
这是div1中的内容
<div id="div2">
这是div1后代div2中的内容
</div>
</div>
显示结果为
div2虽然并没有设定这种样式，但是实际上却使用了该样式，说明从它的父代div1那里继承而来
通过开发工具进一步可以佐证继承的存在
扫一扫
109
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
