css-selector

作为一名前端程序员，我接触过很多CSS。了解CSS选择器和权重值计算非常重要。我想当然地认为CSS选择器并不难，就像我一样。加一层肯定会把我之前写的都覆盖掉，这样最后的代码想想后期维护都吓人。所以今天用六分钟来学习CSS选择器和权重计算还是很重要的。广义CSS选择器通配符选择器(*)-0标签选择器-1伪元素(::after,::before,::selection,::first-line,::first:letter)-1类选择器-10伪-类选择器(:link,:hover,:active,:visited,:root,:target,:not)-10属性选择器([title],[title=value])-10id选择器-100个内联样式-1000个作为补充，1.还有后代选择器，亲子选择器>，哥哥选择器~，相邻选择器+，权重拆分成两个然后计算求和2.!important是最重要的，权重优于一切。对于添加！分别对类选择器和标签选择器样式很重要，如何根据其他选择器的权重和高样式使用通配符选择器*通配符选择器？一般在清除默认样式时，使用通配符来设置。通配符设置的样式会覆盖默认样式。默认风格是继承，继承没有权重。因为继承没有权重，所以可以被通配符权重为0的选择器设置的样式覆盖。选择器和伪元素选择器归为一类，权重值相同，无可厚非。页面渲染后，在console元素显示的源代码中，伪元素以标签的形式显示。类选择器、伪类选择器、属性选择器理解为挂在类选择器上。想想看，对吧？比如.classs,.class[title],.class[title='text'],.class:hover,:class:activeidselector从理解js获取dom节点的角度来看，getElementByID只能获取一个，你可以想象，直壁类的权重也很高，只能设置唯一，享有唯一性。内联选择器记住就近原则，可以想象内联选择器的权重值最大---1000，上面的减去0，和最后一个通配符0除了权重之外，上面的选择器都是有权重的，经常会看到因为css源的顺序和设置不同导致渲染结果不同。分析：就近原则必须优先于内联样式和轮廓样式，具有相同的权重后面的设置样式必须大于前面的设置样式，用户自定义>开发者设置>用户代理默认（浏览器默认），所以推荐的链接样式排序（link-visited-hover-active，LVHA）都是同权重的伪类元素，后面覆盖前面。因此，为了防止被点击（已访问）和未访问（:link）时不能触发:hover和:active，设置了LVHA原则。由于任何链接要么被访问过，要么未被访问过，将lV放在后面会覆盖前两个的样式。