Css 为div类内的元素使用类_Css

Css 为div类内的元素使用类

css

Css 为div类内的元素使用类,css,Css,CSS的新手问题。对不起，如果我把事情说错了当信息在详细视图、编辑视图或列表视图中时，我将表包装在标记中，以便我可以控制CSS/格式。我的标签中的所有格式都很好。我不知道如何为定义了类的元素引用css。对于我的元素，如果元素包含标签或数据，我想特别格式化 <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Test CSS</title> <

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

当信息在详细视图、编辑视图或列表视图中时，我将表包装在标记中，以便我可以控制CSS/格式。我的标签中的所有格式都很好。我不知道如何为定义了类的元素引用css。对于我的元素，如果元素包含标签或数据，我想特别格式化

<!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>

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

<foo class="detail label">

所以

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

我可以匹配。两个单独的元素，每个元素有一个名称

请注意，如果html被反转：

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

这与.detail.label规则不匹配，因为顺序是颠倒的。

.detail.label引用的元素至少包含两个类detail和label：例如class='detail label'。detail.label选择同时包含类detail和类标签的元素–这不是HTML中的元素。抱歉，我是误解。我尝试了以下方法，但我所有的td背景仍然是黄色的。我在上面编辑了我的示例代码..detail.label tr td表示一个元素，它包含类detail和label，以及子体tr和子体td。换言之，这将是非常感谢你，这个答案是有道理的。我很感激你的迅速反应。是否可以使用我正在使用的html结构来构造CSS以给出我想要的结果？

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