Question

我有以下HTML：

<div id="graphicArea">
    <div id="page1" class="pageArea land"></div>
    <div id="page2" class="pageArea land"></div>
</div>

我的CSS样式表文件片段（可行）：

.pageArea {
    width:220px!important;
    height:210px!important; 
 }

我的CSS样式表文件片段（这不起作用）：

.pageArea.land {
    width:220px!important;
    height:210px!important; 
 }

neitheir这是有效的：

div.pageArea.land {
    width:220px!important;
    height:210px!important; 
 }

此文件中没有太多内容，所以我很确定它不会覆盖css。任何人都知道为什么它不能工作？

感谢。

修改

所有这些css都在@media print {..}中。我不认为它的相关性。

EDIT2

FF是否有关于以mm为单位设置div高度/宽度的问题？我想这就是重点......

Answer 1

根据CSS 2.1 specification，您的代码应该有效。您使用的是Internet Explorer 6吗？

编辑1：.class1.class2适用于Chrome，也可能适用于其他浏览器。你确定你的选择器不工作吗？尝试“display：none”非常确定。

Answer 2

.pageArea.land表示您定位的元素有2个类pageArea和land。

您的HTML如何布局？ .land是.pageArea的孩子吗？如果是这样，你只需要在它们之间留一个空格，即

.pageArea .land { .... }

Answer 3

试试这个：

 <div id="page1" class="pageArea land"></div>


.pageArea {
    width:220px!important;
    height:210px!important; 
 }

.land {
    width:220px!important;
    height:210px!important; 
}

Answer 4

你在pageArea中有一个土地点，它必须看起来像div.pageArea, .land

Answer 5

你必须在.pageArea.land之间留一个空格.pageArea .land你可以试试下面的css结构
div＃page1 .pageArea { css就在这里 }

div＃page1 .land { css就在这里 }

div＃page2 .pageArea { css就在这里 }

div＃page2 .land { css就在这里 }

Answer 6

在应用级联后，使用Firebug确定哪些样式会影响这些元素的最终外观。

鉴于你给我们的小剪辑HTML和CSS，它看起来还不错，但你告诉我们你没有得到想要的结果。再加上你对!important的多余使用，我认为可以肯定的是，你的样式表包含许多未在代码示例中显示的冲突属性，并且其中一个或多个正在影响.pageArea.land

Answer 7

编辑所有这些css都在@media print {..}中。我不认为它的相关性。

如果它在@media print { }中，则在打印时将应用css

要在浏览器中应用@media screen { }

如果您想在打印和屏幕上看到它，请使用@media screen, print { }

CSS问题：为什么我的css样式表选择器无法正常工作？

7 个答案: