gpt4 book ai didi

html - 我需要一个解决方案来处理 CSS3 中元素的 id 内的两个选择器

转载 作者:太空宇宙 更新时间:2023-11-04 14:24:30 25 4
gpt4 key购买 nike

我的 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 样式的最佳方式是什么?我知道一个解决方案将是使模态成为一个类,然后将 id 用于不同的大小。但制作只在页面上出现一次的东西作为一个类似乎是不对的。

在 CSS 中有什么方法可以让我拥有“modal-subject”和“modal-city”的 id,然后使用一些 CSS 选择器来挑选“modal”和“-city”以便 CSS 可以处理这?

更新:

看起来像What does the selector [class^="span"] do?可能是解决这个问题的方法。

最佳答案

每个页面都有一个围绕模态的包装器,将页面名称作为一个类,或者您可以使用 body 标签,例如

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

您可以通过以下操作在主题 页面上选择模式:

.page-subject #modal{ background:red; }

对于城市页面,您将拥有一个类为 page-city 的包装器,您将以相同的方式在 CSS 中进行选择:

.page-city #modal { background:magenta; }

关于html - 我需要一个解决方案来处理 CSS3 中元素的 id 内的两个选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19652945/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com