HTMLコンテンツの特定のCSSタグ

Question

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：私は、特に私のhtmlコードで番号1を見つけるとを介してそれを変更する必要があるとして

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

は現在、私は問題を抱えていますhtmlファイルを編集しなくても、他のファイルを赤色にしたり、HTMLファイルを編集したりせずに、私のpythonスクリプトを使ってcssを赤色に更新してリセットします。

Answer 1

"1" { color: blue; }は有効なCSSではありません。 CSSセレクタは数字で始めることはできず、二重引用符で囲まれません。

他の回答にも触れましたが、これは要素にクラス「1」を与え、それに応じてCSSを調整することで解決できます。私はすでにここに3つの答えがあるので、ここにCSSを投稿するつもりはありません。

あなたの質問には、これは必ずしも利用可能なオプションではないと私は信じています。問題はこれが達成できることですが、CSSだけでは達成できません。これらの要素をターゲットにするには、スクリプトを使用する必要があります。

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

Answer 2

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

Answer 3

あなたはまだあなたが何をする必要があるかだけ追加され、あなたのHTMLにクラス.oneを追加しました：

.one{color:blue;} 

あなたのCSSに

EDIT： 何を私はちょうど.oneが "1"が含まれているが、あなたを見ている要素でのみ使用されている場合は意味があると言ったR HTMLそう

Answer 4

.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をハイライト表示します。