Question

CSS的新手问题。对不起，如果我说错了。

我在<div>标签中包装表格，当信息在详细视图，编辑视图或列表视图中时，我可以控制我的CSS /格式。我的<div>标记中包含格式的所有内容都正常工作。我无法弄清楚如何为已定义类的<td>元素引用我的css。对于我的<td>元素，如果<td>元素包含标签或数据，我想要专门格式化。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test CSS</title>
<style>
td {
    border:none;
    vertical-align:top;
    padding:25px 26px;
    vertical-align:top;
    text-align:left;
    white-space:nowrap;
    background-color:darkgrey;
}
.detail td {
    background-color:yellow;
}
.detail .label td {
    background-color:red;
}
.detail .data td {
    background-color:green;
}
</style>
</head>
<body>

<div id='default' class='detail'>
<table id='detailpanel' cellspacing=0>
<tr>
<td class='label'>
Should have Red background but is Yellow
</td>
</tr>
<tr>
<td class='data'>
Should have Green background but is Yellow
</td>
</tr>
<tr>
<td>
Should have Yellow background and is Yellow
</td>
</tr>
</table>
</div>

</body>
</html>

以下是我正在寻找的。我偶然发现了以前我没有意识到的CSS选择器。我不知道这是好的还是坏的做法，但它允许我对表格采用标准结构并用div包装以应用特定的样式。如果通过CSS有更好的方法，我将不胜感激。

我是这个网站的新手，所以请告诉我是否有适当的礼节来申请积分或回答给出的答案。他们并不是我所寻找的确切答案，但在学习和获得我想要的答案时仍然非常有帮助。

我正在编辑我的问题，因为该网站不允许我在8个小时内回答我自己的问题。

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Test CSS</title>
<style>
td {
    padding:20px;
    background-color:orangered;
}
td[class=label] {
    background-color:tan;
}
td[class=data] {
    background-color:yellowgreen;
}
.detail {
    background-color:black;
    padding:5px;
}
.detail td {
    background-color:yellow;
    vertical-align:top;
}
.detail td[class=label] {
    background-color:red;
}
.detail td[class=data] {
    background-color:green;
    vertical-align:bottom;
}
.edit {
    background-color:black;
    padding:25px;
}
.edit td {
    background-color:lightblue;
}
.edit td[class=label] {
    background-color:lightgreen;
}
.edit td[class=data] {
    background-color:lightsalmon;
}
</style>
</head>
<body>

<table cellspacing=0>
<tr>
<td class='label'>
Should have tan background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
<tr>
<td class='data'>
Should have yellowgreen background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
<tr>
<td>
Should have orangered background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
</table>

<br/><br/>

<div id='default' class='detail'>
<table cellspacing=0>
<tr>
<td class='label'>
Should have Red background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
<tr>
<td class='data'>
Should have Green background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
<tr>
<td>
Should have Yellow background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
</table>
</div>

<br/><br/>

<div id='default' class='edit'>
<table cellspacing=0>
<tr>
<td class='label'>
Should have lightgreen background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
<tr>
<td class='data'>
Should have lightsalmon background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
<tr>
<td>
Should have lightblue background
</td>
<td>
<br>line<br>line<br>line
</td>
</tr>
</table>
</div>

</body>
</html>

Answer 1

.detail.label需要一个如下所示的元素：

<foo class="detail label">

字面上是一个具有这些类名设置的元素。您的html中没有任何内容，其中单个class="..."中包含这两个类名，因此规则当然不匹配。

你需要

.detail .label
       ^---note the space

那样

<div class="detail">
      <td class="label">

可以匹配。两个SEPARATE元素，每个元素都有一个名称。

请注意，如果html被颠倒了：

<div class="label">
    <td class="detail">

这与.detail .label规则不匹配，因为排序是相反的。

在div类中使用class for element

1 个答案: