0

我的 HTML 上有一个模式，所以我创建了以下 CSS。我给了它一个 id 而不是一个类，因为页面上只使用了一个。

#modal {
    position: fixed;
    z-index: 1050;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 900px; 
    height: 300px;
    margin: auto;
}
  • 在我的页面“主题”上，我希望模态框的宽度为 900 像素，高度为 300 像素。我假设处理这个问题的方法是在 CSS 中使用主题 id 和 900/300 的宽度和高度。
  • 在我的页面“城市”上，我希望模态框的宽度为 800 像素，高度为 300 像素。我假设处理这个问题的方法是在 CSS 中使用主题 id 和 800/300 的宽度和高度。

我处理 CSS 样式的最佳方法是什么？我知道一种解决方案是将 modal 设为一个类，然后将 id 用于不同的大小。但是，将只在页面上出现一次的东西作为类制作似乎并不正确。

CSS中是否有某种方法可以让我拥有“modal-subject”和“modal-city”的ID，然后使用一些CSS选择器来挑选“modal”和“-city”，以便CSS可以处理这个？

更新：

看起来选择器 [class^="span"] 做了什么？可能是解决此问题的方法。

4

4 回答 4

1

每个页面都会在模态框周围有一个包装器，将页面名称作为一个类，或者您可以使用 body 标记，例如

<body class="page-subject"> <!-- for the city page class would be "page-city" -->
 <div id="modal"></div>
</body>

您可以通过以下方式选择主题页面上的模式：

.page-subject #modal{ 背景：红色；}

对于城市页面，您将拥有一个带有page-city类的包装器，并且您可以以相同的方式在 CSS 中进行选择：

.page-city #modal { 背景：洋红色；}

于 2013-10-29T08:22:03.593 回答
0

如果您有一个div带有 id的容器，city那么您可以尝试以下 css：

#city #modal {
   width: 800px; 
}
于 2013-10-29T08:21:49.840 回答
0 
<div id="modal" class="subject">
</div>
<div id="modal" class="city">
</div>

在你的样式表中

.city{
widht:800px !important;
}
.subject{
widht:900px !important;
}
于 2013-10-29T08:23:55.320 回答
0

您可以使用类来补充#modal

因此，例如，您的 #model 如下所示：

#modal {
position: fixed;
height: 300px;
z-index: 1050;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}

然后你将有 2 个课程：

#modal.small { width: 800px;}
#modal.big { width: 900px; }

现在你可以像这样调用你的模态：

<div id="modal" class="big">content</div>
于 2013-10-29T08:24:08.883 回答