影响类定义之外的HTML元素的CSS类样式
影响类定义之外的HTML元素的CSS类样式
提问于 2021-11-04 22:50:00
在一个类下定义的样式属性会影响具有不同类定义的另一个元素的属性。
具体地说，移动表中th和td的样式将覆盖特性表中定义的样式。检查Chrome中的样式，它清楚地显示运动样式胜过特征设置。
下面是代码的工作示例。它可以在w3chools.com的这个链接上运行。
我尝试了许多变体，但都无法纠正它。检查了这里和其他网站的解决方案，但无济于事。
我真的很想知道我做错了什么。谢谢。
.grid-container-0 {
display: grid;
grid-gap: 1px;
grid-template-columns: auto auto 5px auto;
width: 200mm;
border: solid black thin;
padding: 0px;
background-color: white;
}
.grid-container-2 {
display: grid;
grid-gap: 1px;
border: none;
padding: 2px;
background-color: white;
}
.grid-container-5 {
display: grid;
grid-gap: 1px;
border: none;
padding: 1px;
background-color: white;
}
.title {
padding: 2px;
text-align: left;
font-size: 12pt;
font-weight: bold;
color: white;
background-color: black;
}
div.characteristics {
grid-row: 2;
grid-column: 1 / span 2;
}
.characteristics th,
td {
padding: 2px;
text-align: center;
font-size: 10pt;
}
.characteristics th:last-of-type,
td:last-of-type {
text-align: left;
}
.characteristics tr:last-of-type {
font-weight: bold;
}
div.movement {
grid-row: 4;
grid-column: 2;
}
.movement th,
td {
margin: 0px;
padding: 0px 2px;
text-align: left;
font-size: 8pt;
}<body>
<div class="grid-container-0">
<div class="grid-item characteristics">
<div class="grid-container-2">
<div class="grid-item characteristics-1 title">CHARACTERISTICS</div>
<div class="grid-item characteristics-2">
<table>
<tr>
<th>Val</th>
<th>Char</th>
<th>Points</th>
<th>Roll</th>
<th>Notes</th>
</tr>
<tr>
<td>10</td>
<td>STR</td>
<td>0</td>
<td>11-</td>
<td>HTH Damage 2d6 END [1]</td>
</tr>
<tr>
<td>10</td>
<td>DEX</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>CON</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>INT</td>
<td>0</td>
<td>11-</td>
<td>PER Roll 11-</td>
</tr>
<tr>
<td>10</td>
<td>EGO</td>
<td>0</td>
<td>11-</td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>PRE</td>
<td>0</td>
<td>11-</td>
<td>PRE Attack: 2d6</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td>3</td>
<td>OCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>DCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>OMCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>DMCV</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>SPD</td>
<td>0</td>
<td></td>
<td>Phases: 6, 12</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td>2</td>
<td>PD</td>
<td>0</td>
<td></td>
<td>2 PD (0 rPD)</td>
</tr>
<tr>
<td>2</td>
<td>ED</td>
<td>0</td>
<td></td>
<td>2 ED (0 rED)</td>
</tr>
<tr>
<td>4</td>
<td>REC</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>END</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>10</td>
<td>BODY</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td>20</td>
<td>STUN</td>
<td>0</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3"> </td>
<td>0</td>
<td>Total Characteristic Points</td>
</tr>
</table>
</div>
</div>
</div>
<div class="grid-item movement">
<div class="grid-container-5">
<div class="grid-item movement-1 title">MOVEMENT</div>
<div class="grid-item movement-2">
<table>
<tr>
<th>Type</th>
<th>Total</th>
</tr>
<tr>
<td>Run</td>
<td>12m[24m NC]</td>
</tr>
<tr>
<td>Swim</td>
<td>4m[8m NC]</td>
</tr>
<tr>
<td>H. Leap</td>
<td>4m</td>
</tr>
<tr>
<td>V. Leap</td>
<td>2m</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
回答 1
Stack Overflow用户
发布于 2021-11-05 00:03:51
当您在CSS中编写.characteristics th, td时，您显然希望将其应用于.characteristics th和.characteristics td元素。
然而，这并不是它的意思:它实际上适用于.characteristics th元素和所有td元素。这就是为什么你会看到一个类的风格出现在不应该出现的地方。
下面是一个例子：
.red i, b {color:red}
.blue i, b {color:blue}<div class="red">1 <i>2</i> <b>3</b></div>
<div class="blue">4 <i>5</i> <b>6</b></div>
您可能希望2和3是红色的，5和6是蓝色的，但实际情况并非如此：color:red和color:blue规则都适用于所有b元素，因此它们最终的颜色是相同的(在本例中是蓝色)。
要解决这个问题，必须将.characteristics th, td编写为.characteristics th, .characteristics td (对于使用逗号的其他地方也是如此)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69846731
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号