Question

我有以下CSS，用于水平滚动在div中并排放置的图像。正如@Moob所建议的那样我正在使用

#scroll li:first-child {
padding-left:30px;
}
#scroll li:last-child {
padding-right:50px;
}

来自以下css

#scroll {
width:665px;
height:550px;
margin:0px auto;
background:#ffffff;
overflow-y:hidden

}
#scroll ul {
margin:0; 
padding:0;
display:table;
list-style:none;
}
#scroll li {
padding:10px 100px;
text-align:center;
display:table-cell;
vertical-align:middle;
border:1px solid #fff;
}

#scroll li:first-child {
padding-left:30px;
}
#scroll li:last-child {
padding-right:50px;
}

#scroll img {
border:0;
display:block;
margin:0px auto;
}

#scroll span {
padding:10px 0 0;
display:block;

}

为了控制第一图像的左边距和最后一个图像的右边距，因为图像的长度/高度变化不大于665×550像素。我正在框架类型框中显示图像，启用水平滚动。我的问题是，如果我想在5个不同的页面上使用相同的CSS来显示不同类型的图像，我该如何单独设置

#scroll li:first-child {
padding-left:30px;
}
#scroll li:last-child {
padding-right:50px;
}

对于每个页面，因为第一个和最后一个图像的填充在不同页面上会有所不同吗？我只是在我的css文件链接下将它添加到该页面的头部样式中吗？它会覆盖文件值吗？

谢谢，莱恩

Answer 1

不要将页面特定的CSS添加到页面标题中，这是一个维护的噩梦。

在每个页面的id标记中添加唯一的body：

<body id="page1">

然后使用id作为CSS中的选择器来覆盖原始设置：

#page1 #scroll li:first-child {
   padding-left:30px;
}
#page1 #scroll li:last-child {
   padding-right:50px;
}

#page2 #scroll li:first-child {
   padding-left:40px;
}
#page2 #scroll li:last-child {
   padding-right:60px;
}

...

#page9 #scroll li:first-child {
   padding-left:50px;
}
#page9 #scroll li:last-child {
   padding-right:70px;
}

这样您就可以将所有CSS保存在一个文件中。

Answer 2

只要您的页内样式代码包含在您的css文件之后，它就会优先考虑。只需导入您的css文件，然后执行此操作即包括标记中的调整，因为CSS优先于上述规则。

覆盖不同页面中的CSS值

2 个答案: