css 为什么我的内联样式没有应用到表列？

jv4diomz 于 2023-05-08 发布在其他

关注(0)|答案(2)|浏览(160)

我想有一个简单的表组成的7列和x行（星期一，…，星期日）&1 - 365我想背景颜色的col-saturday和col-sunday是红色的

这是我的CSS（外部，在同一个文件夹中）的外观：

*{
background-color:black;
color:white;
}
table{
width:100%;
}
th,td{
border:2px solid white;
border-collapse:collapse;
background-color:black;
}
tr:hover td{
background-color:green;
}

这是我的代码看起来像表：

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Homepage</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styless.css">
</head>
<body>
<table>
   <colgroup>
      <col span="5">
      <col span="2" **style="background-color:red"**>
   </colgroup>
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
</body>
</html>

how it looks like; no red background-color
我不明白为什么太阳和太阳不会是红色的。我认为内联样式具有最高的优先级，或者我错过了什么？
当我从我的代码中取消链接.css时，它看起来像这样：
.css unlinked; red background-color

css

来源：https://stackoverflow.com/questions/76172874/why-is-my-inline-style-not-being-applied-to-table-column

2条答案

按热度按时间

zvokhttg1#

因为这不是你的要求中必须的，我会在没有<colgroup>的情况下完成它，并通过CSS实现所有内容，所以在我看来你有更多的灵活性。关键是选择最后两个子元素。您可以通过使用:nth-child(n)选择器来实现这一点，如:nth-child(-n+2)。看一下，希望有帮助。

/* CSS for the 1st table */
table.demo1 {
    width: 100%;
    border: 2px solid black;
    background-color: black;
    color: white;
}
table.demo1 th, td {
    border: 2px solid white;
    background-color: black;
}
table.demo1 tr:hover td {
    background-color: green;
}
table.demo1 tr th:nth-last-child(-n+2), 
table.demo1 tr td:nth-last-child(-n+2) {
    background-color: red;
}

/* CSS for the 2nd table */
table.demo2 {
    width: 100%;
    border: 2px solid black;
    background-color: black;
    color: white;
}
table.demo2 th, td {
    border: 2px solid white;
    background-color: black;
}
table.demo2 tr td:hover {
    background-color: green;
}
table.demo2 tr th:nth-last-child(-n+2), 
table.demo2 tr td:nth-last-child(-n+2) {
    background-color: red;
}

/* CSS for the 3rd table */
table.demo3 {
    width: 100%;
    border: 2px solid black;
    background-color: black;
    color: white;
}
table.demo3 th, td {
    border: 2px solid white;
    background-color: black;
}
table.demo3 tr:hover td {
    background-color: green;
}
table.demo3 tr:hover td:nth-last-child(-n+2) {
    background-color: red;
}
table.demo3 tr th:nth-last-child(-n+2) {
    background-color: red;
}

<table class="demo1">
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
<br>
<table class="demo2">
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>
<br>
<table class="demo3">
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
   <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
   </tr>
</table>

赞(0）回复(0）举报 2023-05-08

rks48beu2#

td在colgroups中。因此，td的每个直接样式（即使在单独的表中）都将优先于每个colgroup样式。
尝试以下操作：

th,td{
border:2px solid white;
border-collapse:collapse;
}
th{
background-color:black;
}

或者尝试@Dimava建议，它会保存你的合作。

赞(0）回复(0）举报 2023-05-08

我来回答

css 为什么我的内联样式没有应用到表列？

这是我的CSS（外部，在同一个文件夹中）的外观：

这是我的代码看起来像表：

2条答案

相关问题

热门标签

最新问答