包含 space 或逗号的动态 CSS 样式 class

Question

我正在根据状态值动态设置样式 class，例如：

<h:outputText value="#{item.status}" styleClass="#{item.status}"/>

以及一些渲染示例：

<span class="Incomplete">Incomplete</span>
<span class="Expired">Expired</span>
<span class="Expiring Soon">Expiring Soon</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>

该值在我无法控制的数据库中。如何使用 CSS 样式来定位这些样式？尽管最后两个有一个space和一个逗号，但它们实际上都是单一的class。

这就是我的方法，但它是侥幸还是正确的方法？

对于 Expired 或 Incomplete 我想要红色：

.Expired, .Incomplete {
    color: white;
    background-color: red;
}

Expiring Soon我想要黄色

.Expiring, .Soon {
    color: black;
    background-color: yellow;
}

一个Incomplete, Overdue:

.Incomplete, .Overdue {
    color: white;
    background-color: red;
}

Answer 1

如果您无法更改 HTML，您可以这样定位...

.Expired,
.Incomplete {
  color: white;
  background-color: red;
}

.Expiring.Soon {
  color: black;
  background-color: yellow;
}

.Overdue {
  color: white;
  background-color: blue;
}

<span class="Incomplete">Incomplete</span>
<span class="Expired">Expired</span>
<span class="Expiring Soon">Expiring Soon</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>

Answer 2

For either Expired or Incomplete I want Red
.Expired, .Incomplete {
    color: white;
    background-color: red;
}

正确：OR

An Expiring Soon I want Yellow
.Expiring, .Soon {
   color: black;
   background-color: yellow; }

这里应该使用AND，意思是没有逗号，没有空格：

.Expiring.Soon {
   color: black;
   background-color: yellow;
}

（否则，每个 .Expiring 或 .Soon 的条目都将为黄色。）

HTML中的无效comma（CSS 类用空格分隔）-我不确定它是否有影响。这可能取决于浏览器，它是否将其解析为两个类（Incomplete 和 Overdue）或者甚至是两个类其中一个包含逗号：(Incomplete, 和 Overdue)

我对 Comma 做了一些快速测试。浏览器（Internet Explorer、Chrome 和 Firefox）似乎忽略了在 HTML 标记中包含 , 的类。

也就是说，你的最后一个例子

<span class="Incomplete, Overdue">Incomplete, Overdue</span>

只是呈现为

<span class="Overdue">Incomplete, Overdue</span>

.test1 {
  background-color:red;
}

.test2 {
  border:2px solid blue;
}

<div class="test1, test2">
  with comma after test1
</div>

<div class="test1 test2,">
  with comma after test2
</div>

<div class="test1,test2">
  with comma no whitespace
</div>

<div class="test1 , test2">
  with comma double whitespace
</div>

Answer 3

This is what I have that works but is it working by a fluke or is the right way?

您的示例之所以有效，是因为在这些特定示例中，CSS 将您的 单个 class 作为两个单独的 class 处理。特别是这个：

<span class="Incomplete, Overdue">Incomplete, Overdue</span>

.Incomplete, .Overdue {
    color: white;
    background-color: red;
}

只因为 .Overdue 才有效。要在 class 名称中使用逗号和空格，您必须这样做：

[class="Incomplete, Overdue"] {
  color: white;
  background-color: red;
}

<span class="Incomplete Overdue">Incomplete Overdue</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>

以上称为attribute selector.

也可以转义某些字符，例如 CSS (.Incomplete\, { ... }) 中的逗号。对于空格，您可以简单地将其与分组 CSS 选择器的概念结合起来。实际上 HTML .Inclomplete, 和 .Overdue 中有两个选择器但是下面的 CSS 我们可以说只有两者的组合 (with a ) 之间的空格应该被选中（这将表现得像 单个 class):

.Incomplete\,.Overdue {
  color: white;
  background-color: red;
}

<span class="Incomplete Overdue">Incomplete Overdue</span>
<span class="Incomplete, Overdue">Incomplete, Overdue</span>
<span class="Overdue">Overdue</span>

包含 space 或逗号的动态 CSS 样式 class

Dynamic CSS style class that has a space or comma

css

stylesheet