css复习
3.10选择器总结
除了内联样式(用style属性描写的),对于样式的描述格式有
样式的描述包括两部分:即选择器和样式内容
样式内容:是键值对的形式描述样式的细节描述,比如字体大小,颜色、高度等
选择器:描述后面的样式施加到哪些目标,或者说是根据某个依据来选择应用样式的目标
根据选择依据的不同,就产生了各种不同的选择器
元素选择器
按照标签(元素)的名称来选择相应的目标
div{
background-color:red
}
id选择器
根据元素的id属性来选择,比方下列中的是选择器就是选中id=“tt”的目标,来施加样式
#id name
#tt{
font-size:24px
}
类选择器
根据元素的class属性来选择
选择器选中class=“tt”的元素
.class name
.tt{
font-size:24px
}
属性选择器
根据属性的特征来选择应用样式的目标,所以从这个意义上来讲,它包含了id选择器和class选择器
[title]:选择设置了title属性的元素
[title=”tt”]: 选择title属性等于“tt”的元素
[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选择所有“弟”元素
这些细节有可能记不住,但只要理解了就好,需要用时就可以查一下
伪类、伪元素选择器
伪元素:其效果与增加一个元素来实现的效果等价,所以称之为伪元素
伪类:其效果与增加一个类来实现的效果等价,所以称之为伪类
组合(并)选择器:多个选择器使用同一个样式描述,以逗号隔开
5.CSS三大特性
5.1继承
子代可以直接使用父代的某些样式(特征),当然有些可以继承,有些不能继承。
比如人可以从父母继承姓、肤色等,但性格不能继承
这是div1中的内容
这是div1的后代div2的内容
div2虽然没有设定这种样式,但是实际上却使用了该样式,说明div2从它的父代div1那里继承而来
通过开发者工具查看
但并不是所有的属性都可以继承
#div1{
font-size:24px;
color:red;
border:2px solid green;
}
从结果反映出来div2并没有边框,也就是说border没有被继承
什么属性能继承,什么属性不能被继承
5.2层叠性
公司发了两条通知
通知一
所有员工本月奖金500元
通知二
每位党员加发96元
员工张三党员可领取500+96元
因选择器一(员工)和选择器二(党员),都选中,故进行叠加
<style>
div\{
font-size:24px;
color: red;
\}
\#div1\{
font-weight:bolder;
border: 2pxsolid green;
\}
</style>
这是div1中的内容
这是div2中的内容
从结果可以得出结论:div1的最终样式来自于两个样式的层叠
5.3优先级
在现实生活中当多条互相冲突的规则施加在同一个事物,必须指定一个规则,也就是优先级
从实验中可以得出结论css选择器优先级
内联>id选择器>类选择器>元素选择器
内部样式>外部样式
还没有评论,来说两句吧...