没有前面类的自定义 css

发布于 2025-01-11 14:01:10 字数 554 浏览 0 评论 0原文

我将如何做以下事情（将我的想法转化为可行的东西）？

（我知道@media 仅限于屏幕等）

我想要 1 个！ .css 文件，并且有多个 html 定义 ... ->

在此示例中，我为页面定义了一个 css-rule-set（背景：红色），并且我只希望它在设置 html 的媒体标签时起作用。我不想遍历所有 css 并为每个标签设置一个特殊的 .special_only_this_site .classXthat_already_was_here ...

<html media="frontpage">
 <body> ... ... </body
</html>

然后将其寻址为？

/* this css is only for html with media tag frontpage */
@media only frontpage {
    html {
        background: red;
    }
}

原文

How would I do the following (convert my idea into something that works)?

(I know @media is limited to screen, all etc.)

I want to have 1! .css file and have multiple definitions for html ... ->

In this example I am defining a css-rule-set (background: red) for the page and I only want it to work when I set the media tag of html. I do not want to go through all css and set a special .special_only_this_site .classXthat_already_was_here for each and every tag ...

<html media="frontpage">
 <body> ... ... </body
</html>

and then address it as ?

/* this css is only for html with media tag frontpage */
@media only frontpage {
    html {
        background: red;
    }
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独孤求败 2025-01-18 14:01:10

我认为普通 CSS 不可能做到这一点。

但这就是 SCSS 的用途。在那里你可以这样做：

.frontpage {
  body {
    background: red;
  }
  a {
    color: blue;
  }
}

<html class="frontpage">
   <body> ... ... </body
</html>

编译为：

.frontpage body {
  background: red;
}
.frontpage a {
  color: blue;
}

I don't think it's possible with vanilla CSS.

But that's what SCSS is for. There you could just do this:

.frontpage {
  body {
    background: red;
  }
  a {
    color: blue;
  }
}

<html class="frontpage">
   <body> ... ... </body
</html>

which compiles to:

.frontpage body {
  background: red;
}
.frontpage a {
  color: blue;
}

回复收藏 0 原文

网名女生简单气质 2025-01-18 14:01:10

如果您愿意/能够向每个单独页面/站点的 html/body 标记添加单个不同的类，那么您可以只使用 css 自定义属性。

只需创建一个新类并将覆盖变量应用于该类即可。您可以根据需要创建任意数量的主题，并且只需更改主样式表顶部的类中的变量。

/*Default Theme*/
:root {
  --colorBackground: #ffffff;
  --colorPrimary: #000;
}


/*Theme 2*/
.frontpage {
  --colorBackground: red;
  --colorPrimary: #fff;
}

body {
  background: var(--colorBackground);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
}

<body class="frontpage">
  <h1>Custom theme</h1>
</body>

主题切换示例

document.getElementById("btn").onclick = function() {
  document.body.classList.toggle("frontpage");
}

/*Default Theme*/

 :root {
  --colorBackground: #ffffff;
  --colorBackgroundOn: #53575c;
  --colorFrameAlpha: rgba(255, 255, 255, 0.5);
  --colorPrimary: #16848f;
  --colorPrimaryOn: #ffffff;
  --colorSecondary: #72c253;
  --colorSecondaryOn: #ffffff;
  --fontPrimary: Arial, Helvetica Neue, Helvetica, sans-serif;
  --fontSecondary: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}


/*Theme 2*/

.frontpage {
  --colorBackground: #121212;
  --colorBackgroundOn: #eeeeee;
  --colorPrimary: #bb86fc;
  --colorPrimaryOn: #121212;
  --colorSecondary: #03dac6;
  --colorSecondaryOn: #121212;
  --fontPrimary: Consolas, monaco, monospace;
  --fontSecondary: Copperplate, Copperplate Gothic Light, fantasy;
}

body {
  background: var(--colorBackground);
  color: var(--colorBackgroundOn);
  font-family: var(--fontPrimary);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
  font-family: var(--fontSecondary);
}

input {
  border: 3px solid var(--colorSecondary);
  height: 30px;
}

input[type="submit"] {
  background: var(--colorSecondary);
  color: var(--colorSecondaryOn);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Custom theme</h1>
  <input type="text" value="example input" />
  <input type="submit" id="btn" value="Switch theme" />
</body>

If you are willing/able to add a single, differant class to the html/body tag of each seperate page/site then you can just use css custom properties.

Simply create a new class and apply overwriting variables to that class. You can create as many themes as you wish and will only have to change the variables within the class at the top of your master stylesheet.

/*Default Theme*/
:root {
  --colorBackground: #ffffff;
  --colorPrimary: #000;
}


/*Theme 2*/
.frontpage {
  --colorBackground: red;
  --colorPrimary: #fff;
}

body {
  background: var(--colorBackground);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
}

<body class="frontpage">
  <h1>Custom theme</h1>
</body>

THEME SWITCHING EXAMPLE

document.getElementById("btn").onclick = function() {
  document.body.classList.toggle("frontpage");
}

/*Default Theme*/

 :root {
  --colorBackground: #ffffff;
  --colorBackgroundOn: #53575c;
  --colorFrameAlpha: rgba(255, 255, 255, 0.5);
  --colorPrimary: #16848f;
  --colorPrimaryOn: #ffffff;
  --colorSecondary: #72c253;
  --colorSecondaryOn: #ffffff;
  --fontPrimary: Arial, Helvetica Neue, Helvetica, sans-serif;
  --fontSecondary: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}


/*Theme 2*/

.frontpage {
  --colorBackground: #121212;
  --colorBackgroundOn: #eeeeee;
  --colorPrimary: #bb86fc;
  --colorPrimaryOn: #121212;
  --colorSecondary: #03dac6;
  --colorSecondaryOn: #121212;
  --fontPrimary: Consolas, monaco, monospace;
  --fontSecondary: Copperplate, Copperplate Gothic Light, fantasy;
}

body {
  background: var(--colorBackground);
  color: var(--colorBackgroundOn);
  font-family: var(--fontPrimary);
}

h1,
h2,
h3 {
  color: var(--colorPrimary);
  font-family: var(--fontSecondary);
}

input {
  border: 3px solid var(--colorSecondary);
  height: 30px;
}

input[type="submit"] {
  background: var(--colorSecondary);
  color: var(--colorSecondaryOn);
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Custom theme</h1>
  <input type="text" value="example input" />
  <input type="submit" id="btn" value="Switch theme" />
</body>

回复收藏 0 原文

~没有更多了~