html内容特定的css标签

时间：2017-06-28 10:03:53

标签： html css

HTML：

<link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month">
<tr><th colspan="7" class="month">January 2017</th></tr>
<tr><th class="mon">Mon</th><th class="tue">Tue</th><th class="wed">Wed</th><th class="thu">Thu</th><th class="fri">Fri</th><th class="sat">Sat</th><th class="sun">Sun</th></tr>
<tr><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="sun">1</td></tr>
<tr><td class="mon">2</td><td class="tue">3</td><td class="wed">4</td><td class="thu">5</td><td class="fri">6</td><td class="sat">7</td><td class="sun">8</td></tr>
<tr><td class="mon">9</td><td class="tue">10</td><td class="wed">11</td><td class="thu">12</td><td class="fri">13</td><td class="sat">14</td><td class="sun">15</td></tr>
<tr><td class="mon">16</td><td class="tue">17</td><td class="wed">18</td><td class="thu">19</td><td class="fri">20</td><td class="sat">21</td><td class="sun">22</td></tr>
<tr><td class="mon">23</td><td class="tue">24</td><td class="wed">25</td><td class="thu">26</td><td class="fri">27</td><td class="sat">28</td><td class="sun">29</td></tr>
<tr><td class="mon">30</td><td class="tue">31</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td></tr>
</table>

的CSS：

.sat{
    color: red;
}
.sun{
    color: red;
}
"1" {
    color: blue;
}

目前我遇到了问题，因为我需要在我的html代码中专门找到数字1，然后通过css将其更改为红色而不使其他任何其他红色并且不编辑html文件，因为html文件将不断通过我的python脚本更新和重置。

4 个答案:

答案 0 :(得分：0)

.one {
  color: red;
}
<link rel="stylesheet" type="text/css" href="styles.css">
<table border="0" cellpadding="0" cellspacing="0" class="month">
  <tr>
    <th colspan="7" class="month">January 2017</th>
  </tr>
  <tr>
    <th class="mon">Mon</th>
    <th class="tue">Tue</th>
    <th class="wed">Wed</th>
    <th class="thu">Thu</th>
    <th class="fri">Fri</th>
    <th class="sat">Sat</th>
    <th class="sun">Sun</th>
  </tr>
  <tr>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="sun one">1</td>
  </tr>
  <tr>
    <td class="mon">2</td>
    <td class="tue">3</td>
    <td class="wed">4</td>
    <td class="thu">5</td>
    <td class="fri">6</td>
    <td class="sat">7</td>
    <td class="sun">8</td>
  </tr>
  <tr>
    <td class="mon">9</td>
    <td class="tue">10</td>
    <td class="wed">11</td>
    <td class="thu">12</td>
    <td class="fri">13</td>
    <td class="sat">14</td>
    <td class="sun">15</td>
  </tr>
  <tr>
    <td class="mon">16</td>
    <td class="tue">17</td>
    <td class="wed">18</td>
    <td class="thu">19</td>
    <td class="fri">20</td>
    <td class="sat">21</td>
    <td class="sun">22</td>
  </tr>
  <tr>
    <td class="mon">23</td>
    <td class="tue">24</td>
    <td class="wed">25</td>
    <td class="thu">26</td>
    <td class="fri">27</td>
    <td class="sat">28</td>
    <td class="sun">29</td>
  </tr>
  <tr>
    <td class="mon">30</td>
    <td class="tue">31</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
    <td class="noday">&nbsp;</td>
  </tr>
</table>

答案 1 :(得分：0)

您已经在HTML中添加了一个类.one，因此您需要做的只是添加：

.one{color:blue;}
你的CSS中的

编辑： 如果.one仅用于包含＆＃34; 1＆＃34;的元素，我刚刚说过的话就有意义了。但看到你的HTML看起来如此

答案 2 :(得分：0)

.one{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<style>

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--<script>
$(document).ready(function(){
  $("tr:contains(1)").css("color", "red");
});
</script>!-->
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="month">
<tr><th colspan="7" class="month">January 2017</th></tr>
<tr><th class="mon">Mon</th><th class="tue">Tue</th><th class="wed">Wed</th><th class="thu">Thu</th><th class="fri">Fri</th><th class="sat">Sat</th><th class="sun">Sun</th></tr>
<tr><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="sun one">1</td></tr>
<tr><td class="mon">2</td><td class="tue">3</td><td class="wed">4</td><td class="thu">5</td><td class="fri">6</td><td class="sat">7</td><td class="sun">8</td></tr>
<tr><td class="mon">9</td><td class="tue">10</td><td class="wed">11</td><td class="thu">12</td><td class="fri">13</td><td class="sat">14</td><td class="sun">15</td></tr>
<tr><td class="mon">16</td><td class="tue">17</td><td class="wed">18</td><td class="thu">19</td><td class="fri">20</td><td class="sat">21</td><td class="sun">22</td></tr>
<tr><td class="mon">23</td><td class="tue">24</td><td class="wed">25</td><td class="thu">26</td><td class="fri">27</td><td class="sat">28</td><td class="sun">29</td></tr>
<tr><td class="mon">30</td><td class="tue">31</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td><td class="noday">&nbsp;</td></tr>
</table>
</body>

</html>

它将突出显示其中包含1的td。

答案 3 :(得分：0)

"1" { color: blue; }无效CSS。 CSS选择器不能以一个数字开头，其次，它们永远不会用引号括起来。

正如其他答案所提到的那样，您可以通过为元素提供“one”类并相应地调整CSS来解决此问题。我不会在这里发布CSS，因为这里有3个答案已经显示出来了。

但是，您的问题让我相信这不一定是您可以选择的选项。问题是这可以实现，但不能仅靠CSS。您将不得不使用脚本来定位这些元素。为了完整答案，您可以使用以下jQuery脚本来实现此目的：

<script>
    $('td').each(function(){ //loop through each td
        if($(this).html() == '1') { //if the content of the td is exactly "1" (without quotes)
            $(this).css({'color':'blue'}); //change the CSS rule to have color:blue;
        }
    });
</script>
相关问题
最新问题