css实战⼿册第四版pdf_详细解读CSS优先级，你与成熟前端css 属性选择器
的差距
CSS 优先级注意事项
1、优先级就是分配给指定的 CSS 声明的⼀个权重，它由匹配的选择器中的每⼀种选择器类型的数值决定。
2、⽽当优先级与多个 CSS 声明中任意⼀个声明的优先级相等的时候，CSS 中最后的那个声明将会被应⽤到元素上。
3、当同⼀个元素有多个声明的时候，优先级才会有意义。因为每⼀个直接作⽤于元素的 CSS 规则总是会接管/覆盖(take over)该元素从祖先元素继承⽽来的规则。
4、可以这样来看：选择器描述越具体越稀缺优先级越⾼，后⾯声明的⽐前⾯声明的选择器优先级⾼(同类型的选择器)。
选择器类型
对优先级没有影响的(可以理解为优先级⾮常低的)
通配选择符 (*)
关系选择符
相邻兄弟选择器
⼦选择器
~
通⽤兄弟选择器
' ' 后代选择器
:not() 否定伪类
对优先级有影响的(下⾯的排序优先级依次变⼤)
元素选择器(h1 p div)
伪元素 (::before ::after)
类选择器 (.class1) 和 属性选择器 (a[title] img[title*=hello]) 两者优先级相同，声明在后⾯的会覆盖前⾯的
伪类选择器 (:hover)
ID 选择器 (#demo)
其他影响最终结果的
1、内联样式
2、!important
⼀些要注意的情况
1. 伪元素不可选中(ID、class 都⽆法超越它)
hello div
web前端开发学习Q-q-u-n：784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程和学习⽅法(详细的前端项⽬实战教学视频，PDF)
结果 我是伪元素 仍然不是红⾊，原因就是 #box 描述的是 div，⽽伪元素是⽆法⽤其他选择器选中的。这个伪元素的样式继承⾃ div。
2、类选择器和属性选择器它们的优先级是⼀样的，改变下⾯代码中的属性选择器 [name="lxfriday"] 和类选择器 .box1 的位置，颜⾊会发⽣变化。
hello div
综上，对最终效果的影响是：!important > 内联样式 style > ID 选择器 > 伪类选择器 > 属性选择器 = class 选择器 > 伪元素 > 元素(类型)选择器 > 关系选择器 > 通配符选择器 理解优先级应该从选择器对⽬标的描述准确程度，注意下⾯例⼦的效果：
!important
当在⼀个样式声明中使⽤⼀个 !important 规则时，此声明将覆盖任何其他声明。虽然，从技术上讲，!important 与优先级⽆关，但它与最终的结果直接相关。使⽤ !important 是⼀个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应⽤到相同的元素上时，拥有更⼤优先级的声明将会被采⽤。
不要在内联样式中使⽤ !important，⼩⼼被喷。内联样式已经具有极⾼的优先级了，如果选择器中添加了 !important，可以考虑再定义⼀个更精确的选择器来覆盖 !important。
如果内联样式真的添加了 !important，则可以⽤ js 来消除(js ⽆法消除 class、ID 选择器的 !important)。
hello div
web前端开发学习Q-q-u-n：784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程
和学习⽅法(详细的前端项⽬实战教学视频，PDF)
下⾯是⼀些优化的经验：
1. ⼀定要优化考虑使⽤样式规则的优先级来解决问题⽽不是 !important
2. 只有在需要覆盖全站或外部 CSS 的特定页⾯中使⽤ !important
3. 永远不要在你的插件中使⽤ !important，别⼈将很难更改样式
4. 永远不要在全站范围的 CSS 代码中使⽤ !important
⼀些覆盖 !important 的办法：
1. 只需再添加⼀条带 !important 的CSS规则，再给这个给选择器更⾼的优先级(添加⼀个标签，ID或类)；或是添加⼀样选择器，把它的
位置放在原有声明的后⾯(总之，最后定义⼀条规则⽐胜);
table td { height: 50px !important; }.myTable td { height: 50px !important; }#myTable td { height: 50px !important; }
2. 或者使⽤相同的选择器，但是置于已有的样式之后;
td { height: 50px !important; }td { height: 55px !important; } /* 应⽤这规则 */
3. 或⼲脆改写原来的规则，以避免使⽤ !important。
CSS 优先级需要注意的⼏点
基于形式的优先级(Form-based specificity)
优先级是基于选择器的形式进⾏计算的。在下⾯的例⼦中，尽管选择器 *[id="foo"] 选择了⼀个ID，但是它还是作为⼀个属性选择器来计算⾃⾝的优先级。
hello div
显⽰为绿⾊。虽然匹配了相同的元素，但是 ID 选择器拥有更⾼的优先级。所以第⼀条样式声明⽣效。
⽆视 DOM 树中的距离
hello div
web前端开发学习Q-q-u-n：784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程和学习⽅法(详细的前端项⽬实战教学视频，PDF)
显⽰为purple。
关于伪类和伪元素
伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被⽤于在⽤户将⿏标悬停在按钮上时改变按钮的颜⾊。伪类使⽤ :xxx 的形式表⽰。常见伪类：
1. :link :visited :hover :active 对 标签推荐使⽤这个顺序link: 链接平常的状态visited: 链接被访问过之后hover: ⿏标放到链接上的时候
active: 链接被按下的时候
2. :first-child :last-child :nth-child() :nth-last-child() :only-child
3. :not()
4. :focus
伪元素是⼀个附加⾄选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素推荐写法为::xx, 常见伪元素
1. ::before ::after
2. ::first-line
3. ::first-letter
4. ::selection

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。