继承
定义:子类元素继承父类的样式。
特性
给父元素设置一些属性,所有的子元素都可以继承
并不是所有的属性都可以继承,只有以color、font-、text-、line开头的属性才可以继承
a标签的字体颜色和下划线是不能继承的
h标签的文字大小是不能继承的
特例:
.fonts {
font-size: 20px;}
我的字体大小为20px
我的字体大小为40px
复制代码
给p和h1标签的父元素div设一个font-size为20px,p没有问题,继承了div的20px,但h1却变为了40px,为啥会出现这种情况呢?因为h1的默认样式为2em(32px)。
解决办法:
.fonts {
font-size: 20px;
}
h1 {
font-size: 100%;
}
我的字体大小为20px
我的字体大小为20px
复制代码
优先级
优先级顺序:
!important > 行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
css有哪些选择器
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
#a {
color:red
}
您好
复制代码
派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
- 您好
复制代码
类选择器
在 CSS 中,类选择器以一个点号显示.
.a{
color:red
}
你好
复制代码
属性选择器
带有指定属性的 HTML 元素设置样式
[title]{
color:red
}
// 属性和值选择器
[title=school]{
color:red
}
复制代码
元素选择器
html {
color:red
}
h1 {
color:red
}
复制代码
通配符选择器
* {
color:red
}
复制代码
组合选择器
h1 h2 div {
color:red
}
复制代码
先看选择器是否命中对应的标签,命中后再根据权重来进行判断,权重的意思是数标签的数量,通过比较ID 类 标签 这三种选择器的数量来决定谁的优先级最高。当数量相同时,通过层叠(后者覆盖前者)来决定。
层叠
定义:层叠是css的一个特性,如果两个相同的属性作用于同一标签,它们会发生层叠。如果多个复合选择器,同时作用于我们的同一标签,优先级就不好计算了,就要计算权重,通过比较权重,来先出优先级最高的选择器。
如何计算权重:
(数标签的数量)先数id,如果id相等再数类如果id不相等id多的选择器权重高,权重越高,优先级越高。如果id选择器数量相同,再数类选择器,最后数标签。
注意:比较权重的时候一定要注意:我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。