css复习

秒速五厘米 2022-06-12 07:17 485阅读 0赞

3.10选择器总结

除了内联样式(用style属性描写的),对于样式的描述格式有

样式的描述包括两部分:即选择器和样式内容

样式内容:是键值对的形式描述样式的细节描述,比如字体大小,颜色、高度等

选择器:描述后面的样式施加到哪些目标,或者说是根据某个依据来选择应用样式的目标

根据选择依据的不同,就产生了各种不同的选择器

元素选择器

按照标签(元素)的名称来选择相应的目标

div{

  1. background-colorred

}

id选择器

根据元素的id属性来选择,比方下列中的是选择器就是选中id=“tt”的目标,来施加样式

#id name

#tt{

  1. font-size24px

}

类选择器

根据元素的class属性来选择

选择器选中class=“tt”的元素

.class name

.tt{

  1. font-size24px

}

属性选择器

根据属性的特征来选择应用样式的目标,所以从这个意义上来讲,它包含了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元

因选择器一(员工)和选择器二(党员),都选中,故进行叠加

  1. <style>
  2. div\{
  3. font-size:24px;
  4. color: red;
  5. \}
  6. \#div1\{
  7. font-weight:bolder;
  8. border: 2pxsolid green;
  9. \}
  10. </style>



这是div1中的内容


这是div2中的内容

从结果可以得出结论:div1的最终样式来自于两个样式的层叠

5.3优先级

在现实生活中当多条互相冲突的规则施加在同一个事物,必须指定一个规则,也就是优先级

从实验中可以得出结论css选择器优先级

内联>id选择器>类选择器>元素选择器

内部样式>外部样式

发表评论

表情:
评论列表 (有 0 条评论,485人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS复习——选择器

    派生选择器 > 也叫上下文选择器(CSS1),派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

    相关 css复习

    3.10选择器总结 除了内联样式(用style属性描写的),对于样式的描述格式有     样式的描述包括两部分:即选择器和样式内容 样式内容:是键值对的形式描述样式的

    相关 css3复习大纲

    css3部分: CSS3有很大的兼容性问题,IE9以下不兼容CSS3.0,IE10才开始全面支持CSS3。 而由于浏览器厂商的不同,我们在使用CSS3的时候,有时候需