持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

一、属性选择器

• 属性选择器与标签的属性名和属性值有关，它果果属性名和属性值来匹配元素，然后为元素设置对应的样式
  • [attr]:匹配所有具有attr属性的元素，不考虑属性值
  • [attr="val"]：匹配所有attr属性值为val的元素
  • [attr^="val"]:匹配attr属性值以val开头的元素
  • [attr$="val"]：匹配attr属性值以val结尾的元素
  • [attr*="val"]：匹配attr属性值包含val的所有元素

二、样式继承性

• 内层元素会继承外层元素的样式
• 当内层元素身上的样式与外层元素身上的样式相同时，内置元素会覆盖外层元素
• 并不是所有样式都能被继承，只有文本和字体样式属性能够被继承，其他样式属性不可以
• 在实际开发中，往往会给body标签设置字体大小以及字体颜色，因为body标签是最外层的元素，所有的内层元素都会继承body标签设置的样式

三、选择器优先级

• 选择器优先级为：行内样式>id选择器>标签选择器
• 一般而言，选择器指向的越精准，优先级会越高。
• 通常会用1表示标签选择器的优先级，用10表示类选择器的优先级，用100表示id选择器的优先级，用1000来表示行内样式优先级

• 值越大表示优先级越高，不管是单个选择器还是多个选择器组合，它们的优先级都可以通过上面的公式计算，计算出的值称为权重值，权重越大就表示其优先级越高，如下图的案例中，经计算，第三种组合选择器的权重值最大，则h2标签的样式为该选择器设置的样式

!important属性

• !important在css中用于提升属性的权重，其属性的权重值无穷大

• !important只提成属性的权重，并没有提升选择器的优先级

• !important不能提升继承过来的权重