我试图弄清楚为什么我的一个css类似乎覆盖了另一个(而不是相反)
这里我有两个css类
.smallbox {
background-color: white;
height: 75px;
width: 150px;
font-size:20px;
box-shadow: 0 0 10px #ccc;
font-family: inherit;
}
.smallbox-paysummary {
@extend .smallbox;
font-size:10px;
}
在我看来,我打电话
<pre class = "span12 pre-scrollable smallbox-paysummary smallbox ">
字体(重叠元素)显示为10px而不是20 - 有人可以解释为什么会这样吗？
请注意,这与旧问题不同如何在该页面中的所有按钮上应用CSS？因为这是一种已经存在的风格.因此,如果我们称之为"standard_label_style"的样式已经存在于包含的CSS文件中,我该怎么说这个页面上的所有标签都应该具有这样的样式:
class="standard_label_style"
对每一个人？是的,我知道我可以使用一小段jQuery或JavaScript代码将事后样式应用于事后.我只是想了解我应该如何使用CSS.
跟进
我已经得到了一些评论,说只是使用这样的语法.standard_label_style,label ...不幸的是,这并不像我想要的那样.这样我就可以将其他规则应用于standard_label_style类,以及此页面中标签的规则,但不允许我将该样式应用于此页面上的所有标签.要查看此示例,这里有一个样式表和html来演示.没有课程的标签仍然不会显示为红色,但这是我希望发生的事情.我想将现有的类应用于页面上的所有标签,而不仅仅是具有类的标签,并且不在此页面上添加新样式,现有样式应该是唯一的样式.
included.css:
.standard_label_style { color: red; }
的test.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="included.css">
<style>
.standard_label_style, label { }
</style>
</head>
<body>
<label class="standard_label_style">Test Label</label><br/>
<label>Unclassed Test Label</label>
</body>
</html>
好吧,我有2 css包括
<link href="Styles/layout.css" rel="stylesheet" type="text/css" />
<link href="Styles/ATJournal.css" rel="stylesheet" type="text/css" />
layout.css中
Table.infoBox tr td table tr td
{
padding: 0px;
border: 0px;
}
ATJournal.css
table.ATJMainTable tr td
{
border: 1px solid black;
padding: 3px;
}
然后我们有这张桌子
<Table class="infoBox">
<tr>
<td>
<table class="ATJMainTable">
<tr>
<td>
some text!
</td>
</tr>
</table>
</tr>
</table>
为什么在这种情况下layout.css会覆盖ATJournal.css？
即使我改变css的顺序包括"layout.css"仍然覆盖ATJournal.css ....