html – 具有多个标识符的css类定义

发布时间：2020-12-14 21:38:50 所属栏目：资源来源：网络整理

导读：我刚刚开始学习CSS，遇到一个我不完全明白的例子。我不能很好地描述这一点，这使得找到一个答案很困难(因此，如果一个答案已经存在，我已经被忽视了，我很抱歉)。我的问题是关于以下示例： .theme-light.slider-wrapper { background: #fff; padding: 10px;

我刚刚开始学习CSS，遇到一个我不完全明白的例子。我不能很好地描述这一点，这使得找到一个答案很困难(因此，如果一个答案已经存在，我已经被忽视了，我很抱歉)。

我的问题是关于以下示例：

.theme-light.slider-wrapper {
  background: #fff;
  padding: 10px;
}

我明白CSS中的类是使用.name语法定义的，然后可以在这样的标签中使用：

<div class="name"></div>

我不明白.name1 .name2的“双”声明如何工作，以及如何在标签中使用。

在相关的注释中，我给出的示例网站使用标签中的ID，不存在于样式表中。

解决方法

也许这个使用示例会为你清除。

想象下面的情况。

你将会拥有：

<div class="general-div">some stuff</div>
<div class="general-div special">some stuff</div>
<div class="general-div">some stuff</div>
<div class="extra-div">some stuff</div>
<div class="extra-div special">some stuff</div>

并且让我们说你希望div具有如下相同的属性：

.general-div {width: 300px; height: 300px; border: 1px solid #000;}

.extra-div {width: 200px; height: 200px; border: 1px solid #666;}

但是您希望.special类的.general-div具有红色背景，而extra-div与.special类具有蓝色背景。

你会写：

.general-div.special {background-color: red;}

.extra-div.special {background-color: blue;}

希望它清除使用有关情况。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!