6、前端开发:CSS知识总结——样式的继承和选择器的权重

发布于:2023-01-16 ⋅ 阅读:(464) ⋅ 点赞:(0)

一、CSS中的继承

1、概念:有上下级关系的元素之间,上级元素的样式被下级元素所拥有,这个现象就是继承
2、文本相关的属性和列表相关的属性会被继承

文本相关的属性:
1、文字大小:font-size:数字px 或 数字em 或 数字rem;
(注意:px是像素的绝对尺寸,em是相对尺寸,是父元素文字大小的倍数,rem是相对尺寸,是根元素html文字大小的倍数)

2、文字颜色:color:颜色;

3、文字类型:font-family:’ 类型 ';

4、文字粗细:font-weight:normal正常 或 bold加粗;

5、文本缩进: text-indent: 数字px 或 数字em;

6、文字水平对齐方式:text-align:left 或 center 或 right 或 justify两端对齐;

7、文本修饰线:text-decoration: none 或 line-through删除线 或 underline下划线;

8、文本样式-倾斜: font-style:italic 、 oblique (两个都是倾斜,效果都一样)或 normal ;

9、行高:line-height:数字px;

10、字间距:letter-spacing:数字px;(了解)

11、词间距:word-spacing:数字px;(了解)

列表相关的属性
list-style:none;(即前面的小黑点没有了)

注意:并不是所有的样式都会被继承,比如背景相关的,布局相关的。

二 、选择器的权重

css选择器优先级最高到最低顺序为:

1.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.子选择器(ul < li)

5.后代选择器(li a)

6.伪类选择(a:hover,li:nth-child)

最后,需要注意的是:

!important的优先级是最高的,但出现冲突时则需比较”四位数“;

优先级相同时,则采用就近原则,选择最后出现的样式;

如果选择器是交集选择器,则所有选择器权重相加,谁大听谁的恶;

继承得来的属性,其优先级最低。

!important的书写格式:

#myid {
  background-color: blue !important;
}
 
.myclass {
  background-color: gray !important;
}
 
p {
  background-color: red !important;
}


网站公告

今日签到

点亮在社区的每一天
去签到

热门文章