Question

CSS中，类的优先级是怎样的？我有个例子看不懂，麻烦高人解答

在CSS文件中，关于Img的有以下这么两句
.content_banner a img{float:left;}
.content_banner img{border:none;margin:0px;padding:0px;}

在网页中，
有这么一句
<div class="content_banner">
<a href="#"><img class="aligncenter" src="#"/></a>

</div>

为了让图片实现居中效果，因为aligncenter还没定义，这个时候，
我在CSS文件中添加
.aligncenter{display: block; margin-left: auto; margin-right: auto;}

但这样的情况下，图片依然左对齐，而没有居中

我又尝试了改为添加
.content_banner a img.aligncenter{display: block; margin-left: auto; margin-right: auto;}

结果还是不行，依然左对齐

只有我在删除了 .content_banner a img{float:left;}的情况下，
再添加 .content_banner a img.aligncenter{display: block; margin-left: auto; margin-right: auto;} 才能生效。

我这里有三个不懂
1、a img 和 img有什么不同
为什么控制的是<a href="#"><img class="aligncenter" src="#"/></a>
但用的是a img 而不是img，这里标签明明是img啊

2、引用类的优先级是怎样的？为什么不是就近原则？
在下面两句同时存在的情况下：
.content_banner a img{float:left;}

.content_banner a img.aligncenter{display: block; margin-left: auto; margin-right: auto;}

为什么<a href="#"><img class="aligncenter" src="#"/></a>不能生效？引用aligncenter不是就近原则吗？

3、我试了下，上面的句子，其实可以去掉前面的 .content_banner
只写a img.aligncenter{display: block; margin-left: auto; margin-right: auto;}仍有效
但为什么去掉a img只写.aligncenter{display: block; margin-left: auto; margin-right: auto;}就不行了？
我去了a img，不是把aligncenter的可使用范围扩大了吗？不是代表任何地方都可引用的意思吗？

Answer 1

1.a img 和 img的不同之处：
a img 是代表的是标签a中的图片，仅控制带链接的图片。
img 是代表的是图片，包括已带链接和未带链接的图片。

2.引用类的优先级是采用就近原则。
.content_banner a img{float:left;}
.content_banner a img.aligncenter{display: block; margin-left: auto; margin-right: auto;}
这两条样式其实都采用了，
如果在.content_banner a img.aligncente添加右浮动，那么采用的样式就是.content_banner a img.aligncente。

3.只写a img.aligncenter{display: block; margin-left: auto; margin-right: auto;}有效，因为你的样式控制的是链接中的图片，
写 .aligncenter{display: block; margin-left: auto; margin-right: auto;}这只是代表一个class，但因为这个图片是一个链接图片，所以图片虽然采用了这条样式，但它会被链接样式给覆盖掉。

希望对你有所帮助。

追问

首先谢谢。
但对后面两个问题，还不太懂。
第2问题中，既然就近原则，
在网页中的语句是
离图最近的声明，是要引用aligncenter这个类的，那么应该是
.content_banner a img.aligncenter{} 比 .content_banner a img{} 更近呀，
为什么不是前者覆盖后者；
第3问题，.aligncenter{}的写法不是等于*.aligncenter{} 通配符的意思么？
那应该是所有标签（包括 a img）都可以引用呀？

追答

第2个问题中，是就近原则

但是这里的问题是一个元素是可以采用多个样式，这个你应该知道的。
比如：
body{
color:#555555;
font-size:12px;}
h1{
line-height:30px;
}
页面代码中出现了：
我是标题1
那么这个“我是标题1”采用的样式就应该是：color:#555555;font-size:12px;line-height:30px;
这三个样式。

而我们所谓覆盖的问题就是这个东西已经有了，再出现一个这样的东西，才会覆盖。
你已经有一条：.content_banner a img{float:left;}
而在.content_banner a img.aligncenter这个里面没有出现float属性，这样的话这两个样式就不存在什么覆盖的问题了，而是都被采用了。这下你懂了么