CSS覆盖公共样式中的某个属性
Posted 阿丙的博客园
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS覆盖公共样式中的某个属性相关的知识，希望对你有一定的参考价值。
CSS如何覆盖公共样式中的某个属性？利用CSS样式的优先级。
如下例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> .x{color: red;} .a .x{color:blue;} .a .b .x{color:green;} </style> </head> <body> <div class="x">你好</div> <div class="a"> <div class="x">你好</div> </div> <div class="b"> <div class="x">你好</div> </div> <div class="a"> <div class="b"> <div class="x">你好</div> </div> </div> </body> </html>
页面上字体颜色从上到下，依次是红、蓝、红、绿
有层级关系的样式，越精确的优先级越高。
利用这一个 特点，当公共样式中，当有需要特殊处理的样式，可以使用此种方法：
在当前样式前的父级，添加一个独一无二的样式名称。
另外，当父级中有多个样式的时候，如下：
<div class="a b"> <div class="x">你好</div> </div>
可以定义两个父级样式中的任何一个
<style type="text/css"> .a .x{color:blue;} .b .x{color:green; </style>
如果同时定义了两个父级样式，这个时候字体的颜色就与css中，这两个父级样式的顺序有关了，后加载的样式优先，此时后加载的是.b .x，所以字体颜色是绿色
以上是关于CSS覆盖公共样式中的某个属性的主要内容，如果未能解决你的问题，请参考以下文章