你还在使用!importent 打补丁吗

！importent对于像我这种菜鸟来说是非常重要的一个属性，因为对于css样式的掌握不够，所以想要在大量的css代码中做到样式不重叠，这个属性总是或多或少的在我的代码中出现。
但是大佬们再三叮嘱：“这个属性是不到万一不能用的杀手锏”，如果频繁使用造成的样式混乱是难以估量的。避免使用！importent对于代码的可维护性至关重要。为了向大佬们看齐，不得不舍弃这个杀手锏，但是样式权重的问题如何才能解决呢？此时美妙的css3出现了
css3为我们提供了非常灵活的选择器，在页面中任何一个元素都无法逃脱css3选择器的手心
但是因为css3选择器非常灵活，对于初学者来说可以因为其灵活性导致在学习时有点感到复杂，所以我在此总结了这些常用选择器的解释，用法，以及适用场景。

1.属性选择器，这个选择器的特点就是就是将元素的属性作为标识进行选择。不再仅仅依靠传统的标签名和类名，属性名也成为选择的标识，语法：element[attr]，下面有一个简单的代码

//选中button标签且有disabled属性的元素
button[disabled] {
		cursor：default //光标改为默认
}

属性选择器在使用上非常灵活，有多种选择方式
语法：
element[attr^=" “] //以属性值的开头作为选择依据
element[attr$=” “] //以属性值的结尾作为选择依据
element[attr*=” "] //以属性值包含的值作为选择依据

button[name="user"] //button元素且有name属性且name属性值是user
button[name^="u"] //button元素且有name属性且name属性值开头是u
button[name$="r"] //button元素且有name属性且name属性值结尾是u
button[name*="u"]//button元素且有name属性且name属性值包含u

2.结构伪类选择器 这个选择器非常常用，顾名思义‘伪类’就是不是正常的类，利用结构进行选择，主要分为两种，一种是以子元素child为主导，一种是以子元素且标签名type为主导

ul li:first-child  //选中ul的第一个li(就是ul的第一个孩子如果没有li就选不中)
ul li:last-child //选中ul的最后一个li
ul li:nth-child(n) //选中ul里面的第n个li
注意:这里面的n可以是数字，公式，关键字（even偶数,odd奇数）
公式：5n 就是5的倍数；n+5 就是从第5个开始到最后的元素，	-n+5 就是前5个

还有另外一种type为主导的

div span:first-of-type //就是div中的第一个span元素(div中是有很多别的元素的，只选择第一个span)
div span:last-of-type //最后一个span
div span:nth-of-type(n)//第几个span`

两者的区别主要表现在应用场景上：当父元素里面的子元素都一致的时候使用child， 不一致的时候使用type

3.伪元素选择器 使用这个选择器会创建元素，但是dom中看不到，（一般用于创建小图标或者文字），所以称为伪元素，属于行内元素
语法：
div::before 在元素内部的前面加上内容
div::after 在元素内部的后面加上内容
两者必须有content属性，content是内容，分别加在div中的前面和后面，当然也不会影响下面的css代码。此时的css代码是对content内容的修饰

权重的大小
属性选择器：10
伪类选择器：10
伪元素选择器：1