css 你可以改变一个类中的变量的基础上另一个类名？

muk1a3rh 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(133)

首先，我没有访问HTML代码的权限，我不想使用JavaScript。但我的问题是该网站有一种方法来改变配置文件的颜色。要做到这一点，包含所有要改变颜色的元素的div被赋予一个额外的类名（例如“red”）。现有的css代码然后调整颜色变量，然后你可以在“red”类内部使用这个变量。但是，我想更改颜色的元素完全在这些类之外。有没有一种方法可以检查一个div的类名，如果这个div的class是“red”，那么就改变另一个类的属性。
所以基本上就像一个if条件：如果类的名称是“red”，或者存在名为“red”的类，那么更改类xy的属性
我希望你能理解。我对编程也是非常非常新的。
谢谢

OLD HTML (Refer to new)
<div class="user red"> /*This color value changes depending of the profile color*/
   <a class="title"> Text in red </a>
</div>

<div class="menu">
   <a class="dropdown"> Text that should also be red </a> /*This text should change with the same variable*/
</div>

NEW HTML
<body>
    <div>
       <div>
          <div class="user red"> /*This color value changes depending of the profile color*/
             <a class="title"> Text in red </a>
          </div>
       </div>
    </div>
 
    <div class="menu">
       <a class="dropdown"> Text that should also be red </a> /*This text should change with the same variable*/
    </div>
 </body>

CSS
.user.red {
    --color-blue: 218,65,39;
}
.user.green {
    --color-blue: 37, 204, 81;
}

.title {
   color: rgb(var(--color-blue));
}

我想要这样的东西：

CSS
[if any class with name "red"]
   .dropdown {
      color: 218,65,39;
   }

[if any class with name "green"]
   .dropdown {
      color: 37, 204, 81;
   }

或者类似这样的东西：

CSS
.user.red && .menu { /*This gets only applied when it can be applied to both. If not (because there is no class with name "red") it shouldn't be applied*/
   --color-blue: 218,65,39;
}

.dropdown {
   color: rgb(var(--color-blue));
}

css

来源：https://stackoverflow.com/questions/76173368/can-you-change-a-variable-in-a-class-based-of-another-class-name

2条答案

按热度按时间

irlmq6kh1#

对于您所显示的HTML结构类型，是的，可以这样做：

<div class="user red"> /*This color value changes depending of the profile color*/
  <a class="title"> Text in red </a>
</div>

<div class="menu">
  <a class="dropdown"> Text that should also be red </a> /*This text should change with the same variable*/
</div>
<style>
  .user.red {
    --color-blue: 218, 65, 39;
  }
  
  .user.green {
    --color-blue: 37, 204, 81;
  }
  
  .title {
    color: rgb(var(--color-blue));
  }
  
  .user.red~.menu .dropdown {
    color: rgb(218, 65, 39);
  }
  
  .user.green~.menu .dropdown {
    color: rgb(37, 204, 81);
  }
</style>

但是，请注意警告。
上面的代码片段之所以有效，是因为类为red的div在“同一级别”上，即是div的前一个兄弟，带有类menu。
如果class red在锚（a）元素上，这将不起作用。
更新-发布了一个新的HTML结构。这段代码非常通用--它以“如果任何元素具有类red/绿色”为面值，并查看body元素的所有后代，以查看它们是否具有red/green类。
您可能希望将此设置得更具体一些，具体取决于您正在处理的结构。
注意：：目前（2023年5月），除了Firefox之外，它在主要浏览器中具有良好的支持。FF需要设置标志。

.user.red {
  --color-blue: 218, 65, 39;
}

.user.green {
  --color-blue: 37, 204, 81;
}

.title {
  color: rgb(var(--color-blue));
}

/*[if any class with name "red"]*/

body:has( *.red) .dropdown {
  color: rgb(218, 65, 39);
}

/*[if any class with name "green"]*/

body:has( *.green) .dropdown {
  color: rgb(37, 204, 81);
}

<body>
  <div>
    <div>
      <div class="user red"> /*This color value changes depending of the profile color*/
        <a class="title"> Text in red </a>
      </div>
    </div>
  </div>

  <div class="menu">
    <a class="dropdown"> Text that should also be red </a> /*This text should change with the same variable*/
  </div>
</body>

赞(0）回复(0）举报 2023-05-08

vcirk6k62#

只要在父元素上使用.red类，当你定义一个CSS变量时，所有的子元素都可以访问这个变量。
因此，如果您在单个页面上有多种颜色，请在特定父<div class='parent red'>上使用.red
如果你每页只有一种颜色，你可以把这个类添加到<body class="red">中。
CSS层次结构中声明CSS变量的位置将决定其在整个层次结构的较低级别中的可见性级别。- 来自：https://blog.logrocket.com/css-variables-scoping/
编辑：将演示更改为您的特定用例。

.red{
  --color-theme:red;
}
.green{
  --color-theme:green;
}
.user,.menu{
  color:var(--color-theme);
}

<body class="red"> <!-- change this to green -->

<div class="user"> 
  <a class="title"> Text in red </a>
</div>

<div class="menu">
  <a class="dropdown"> Text that should also be red </a>
</div>

</body>

赞(0）回复(0）举报 2023-05-08

我来回答

css 你可以改变一个类中的变量的基础上另一个类名？

2条答案

相关问题

热门标签

最新问答