css特性

墨蓝 2022-07-13 08:14 121阅读 0赞

# css特性 #

## 继承性 ##

具有继承性属性的3大类：  
1文本相关属性：font-family、font-size、font-style、font-weight、font、line-height、text-align、text-indent、word-spacing  
2 列表相关属性：list-style-image、list-style-position、list-style-type、list-style  
3 颜色相关属性：color  
在实际开发中，应该充分利用css继承性，减少重复代码的编写

## 层叠性： ##

css层叠性是指样式的覆盖，对于一个元素如果，我们重复定义相同的属性，并且这些样式有相同的权重，css以最后定义的样式为准“后来居上”

## CSS优先级 ##

1 引用方式冲突：  
行内样式>(内部样式=外部样式）  
如果内部样式与外部样式同时存在，以最后引入的为准  
2 继承方式冲突  
由于继承方式引起的冲突，则“最近的祖先元素”获胜  
3指定样式冲突  
所谓指定样式，指的是“当前元素的样式”，当直接指定时，权值高者获胜，  
在css中各类权值：  
通配符：0  
伪元素：1  
元素选择器：1  
class选择器：10  
伪类：10  
属性选择器：10  
id选择器：100  
行内样式：1000  
常见的伪元素： ::before ::after ::first-letter ::first-line  
伪类经常看到：：hover ：first-child等  
在css中，选择器权重的计算，只针对于指定样式，，并不能用于继承样式  
4 继承样式与指定样式冲突：  
当继承样式与指定样式发生冲突时，指定样式获胜  
5 ！important  
如果一个样式使用！important来声明，则这个样式会覆盖任何的样式声明  
！important的用处：  
1情况一：

#someId p{color：red；}

p\{color：green；\}  
在外层有\#someId的情况下，如果想要颜色为green，如果不使用！important，则第一条样式的优先级永远比第二条高  
2情况二  
如果有一条很差的行内样式，而行内样式的优先级又很高，可以在内部样式或者外部样式中使用！important来覆盖那些行内样式  
如何覆盖！important  
1 使用相同的选择器，再写一条！important的css语句，放在原来的后边  
2 使用更高优先级的选择器，再添加一条！important语句