Question

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

<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样式来定位这些？即使最后两个有空格和逗号，它们都是单个类。

这就是我的工作原理，但它是通过侥幸工作还是正确的方式？

对于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

这就是我的作品，但它是通过侥幸工作还是正确的方式？

您的示例仅起作用，因为在这些特定示例中，CSS将您的单个类作为两个单独的类处理。特别是这一个：

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

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

仅适用于.Overdue。要在类名中使用逗号和空格，您必须这样做：

＆＃13;

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

＆＃13;

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

＆＃13;

以上称为attribute selector。

也可以转义一些字符，如CSS中的逗号（.Incomplete\, { ... }）。对于空白的东西，你可以简单地将它与分组CSS选择器的概念结合起来。实际上HTML .Inclomplete,和.Overdue中有两个选择器，但是使用以下CSS我们可以说只有两者的组合（与之间的空格）应该是选中（然后表现得像单一类）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

对于已过期或未完成，我想要红色
.Expired, .Incomplete {
    color: white;
    background-color: red;
}

这是正确的：OR

即将到期我想要黄色

.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

如果您无法更改HTML，那么就可以定位......

＆＃13;

.Expired,
.Incomplete {
  color: white;
  background-color: red;
}

.Expiring.Soon {
  color: black;
  background-color: yellow;
}

.Overdue {
  color: white;
  background-color: blue;
}

＆＃13;

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

＆＃13;

具有空格或逗号的动态CSS样式类

3 个答案: