3.2类选择器
根据class的属性来选择元素,样式定义为:
.className{ xxxxxxx}
3.3 ID选择器
根据id名来选择元素,样式定义为:
#idName{xxxxxxxxx}
3.4属性选择器
例:[title*=’d’]:选择title值中包含d的元素
3.5关系选择器
E F :选择E元素的后代元素F(所有后代,包括子类、孙类)
E > F : 选择E元素的直接后代元素(也就是子类)
E + F:选择E元素的第一个弟弟元素F
E ~ F: 选择E元素的所有弟元素F
3.6并选择器
将相同的样式放在一起,类名直接用逗号分开
3.7 通配符选择器
通配符选择器可以选中页面所有的标签
*
写法:*{xxxxxxx}
3.8伪元素、伪类选择器
伪类选择器:
伪元素选择器:
:first-letter 选择文本的首字母
:first-line 选择文本的首行
:after 在元素前面添加内容
:before 在元素后面添加内容
3.9选择器总结
什么是选择器?
选择器:描述后面的样式施加到哪些目标,或者说根据某个依据
来选择应用的样式
根据选择依据的不同,就产生了不同的选择器
- 元素选择器
Div{ background-color:red}
2.id选择器
根据元素的ID属性来选择
书写格式是: #idname{ xxxxx}
#username{font-size:25px}
3.类选择器
根据元素的class属性来选择
书写格式是: .classname{xxxxx}
.passwd{font-size:20px}
4.属性选择器
根据属性的特征来选择应用样式的目标,从这个意义上
讲,它包含了id选择器和类选择器
[title]:选择设置了title属性的元素
[title=”tt”]:选择title属性等于“tt”的元素
[title^=”tt”]:选择title属性以“tt”开头的元素
[title$=“tt”]:选择title属性以“tt”结尾的元素
[title~=”tt”]:选择title属性包含完整单词“tt”的元素
[title*=”tt”]:选择titlt属性包含“tt”的元素
5.关系选择器
根据元素间的家族关系来选择目标
这些细节我们有可能记不住,没有关系
忘记的时候看一下
你能够认识它就行
6.伪元素、伪类选择器
伪元素:其效果等同于增加一个元素,所以称之为伪元素
伪类:其效果等同于增加一个类,所有称之为伪类
7.组合选择器
多个选择器如果想应用同一个样式,可以用逗号隔开
4.布局
4.1文档流
所谓文档流就是按照元素的顺序从左到右,由上而下的方式排列
4.2定位
默认的文档流很多时候不能满足我们的要求,那么我们就需要更多的、
更丰富的布局手段,这个时候就需要定位了
定位方式有static、fixed、relative、absolute
Static静态定位(默认)
无定位,元素正常出现在流(文档流)中
不受left,right,top,bottom的影响