使用純CSS選擇下一個基於孫子值的兄弟值

只要前一個輸入標記的值爲零，我必須將帶有「Some Text」InnerHTML的span標記設置爲紅色。例如：在下面的示例HTML代碼中，第一個「Some Text」span標籤應該是紅色。使用純CSS選擇下一個基於孫子值的兄弟值

<td data-colid="some id1" > 
    <div> 
     <div> 
      <span data-varname="somename">$0.00</span> 
      <input value="$0.0"/> 
     </div> 
    </div> 
</td> 
<td> 
    <span>Some Text</span> 
</td> 
<td data-colid="some id2" > 
     <div> 
      <div> 
       <span data-varname="somename">$10.00</span> 
       <input value="$10.0"/> 
      </div> 
     </div> 
    </td> 
<td> 
    <span>Some Text</span> 
</td>

這些是可用於工作的唯一id，沒有額外的類或java腳本可用。請幫助我一些指針。

來源

2016-01-21 Sudarshan

CSS選擇可在本只選擇孩子，後代（或）兄弟（在DOM中的當前元素之後推出）。「input」和「span」與「某些文本」沒有任何關係。 – Harry

CSS：不可能。 JavaScript：可能。 HTML：可能的 – CoderPi

@哈里：感謝您的迴應，是否有任何其他解決方案與一些複雜的選擇器鏈？ – Sudarshan

試試這個使用jQuery：

與「一些文本」作爲條件

$('td span:contains("Some Text")').css('color','black'); 
$('td input[value="$0.0"]').each(function(){ 
    $(this).closest('td').next().find('span:contains("Some Text")').css('color','red'); 
})

無文本條件

$('td input').each(function(){ 
    $(this).closest('td').next().find('span').css('color','black'); 
}) 
$('td input[value="$0.0"]').each(function(){ 
    $(this).closest('td').next().find('span').css('color','red'); 
})

來源

2016-01-21 12:32:09 Vegeta

，並且在值更改時沒有任何反應？ – CoderPi

您必須將此代碼添加到onchange（）函數中。 – Vegeta

但是如何？並且它不僅應該變紅，而且在值改變之前也應該反向返回 – CoderPi

我沒有使用你的代碼，因爲它是一個令人頭痛的事跟蹤這麼多div。這是一個簡單的HTML佈局和一個複雜的CSS，沒有JS/jQ。如果您像我的演示文稿一樣更改佈局，那麼它不僅會很好用，而且會變得易讀，而且語義也很好。 ;-)

這是一個自定義複選框，我已將其製作爲半永久標記以標記所需條件（即$ 0.0 =紅色文本）。這是一個很少見的CSS例子，它實際上只是在過去使用腳本完成某些事情。如果你需要它來通過編程控制，讓我知道，我會放一些JS英寸

順便說一句，我知道「生產」被嚇壞了的新技術，如HTML和JS，讓你不必須重申。 CodeSir和Harry是正確的，你或者「製作」必須更加靈活，並加入21世紀的^st並使用HTML和JS。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>34923541</title> 
 
    <style> 
 
    html, 
 
    body { 
 
     box-sizing: border-box; 
 
     background: #222; 
 
     color: #eee; 
 
     font: 400 16px/1.4'Verdana'; 
 
     height: 100vh; 
 
     width: 100vw; 
 
    } 
 
    *, 
 
    *:before, 
 
    *:after { 
 
     box-sizing: inherit; 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    fieldset { 
 
     margin: 0 1em 1em 0; 
 
     padding: 8px; 
 
     border-radius: 9px; 
 
     border: 3px double #FF8; 
 
     width: 100%; 
 
     max-width: 19em; 
 
    } 
 
    legend { 
 
     font: small-caps 700 1.5rem/2"Palatino Linotype"; 
 
     color: #FD1; 
 
    } 
 
    /* Demo #1 */ 
 
    input.fade { 
 
     display: none; 
 
    } 
 
    input.fade + label { 
 
     color: #DDD; 
 
     font-size: 16px; 
 
    } 
 
    input.fade + label span { 
 
     display: inline-block; 
 
     width: 12px; 
 
     height: 12px; 
 
     margin: -1px 4px 0 0; 
 
     vertical-align: baseline; 
 
     cursor: pointer; 
 
     background: #555; 
 
     line-height: 100%; 
 
    } 
 
    input.fade:checked + label span:after { 
 
     content: 'X'; 
 
     color: #F00; 
 
     font-family: cursive; 
 
     font-style: oblique; 
 
     font-weight: 900; 
 
    } 
 
    input.fade + label span:after { 
 
     content: ''; 
 
     color: #F00; 
 
     font-family: cursive; 
 
     font-style: oblique; 
 
     font-weight: 900; 
 
    } 
 
    input.fade + label + output:before { 
 
     content: '$10.00'; 
 
     color: #Fc0; 
 
     font-family: 'Raleway'; 
 
     font-style: normal; 
 
     font-weight: 900; 
 
    } 
 
    input.fade:checked + label + output:before { 
 
     content: '$0.00'; 
 
     color: red; 
 
     font-family: cursive; 
 
     font-style: oblique; 
 
     font-weight: 900; 
 
    } 
 
    input.fade + label + output:after { 
 
     content: 'Available'; 
 
     color: #Fc0; 
 
     font-family: `Raleway`; 
 
     font-style: normal; 
 
     font-weight: 900; 
 
    } 
 
    input.fade:checked + label + output:after { 
 
     content: 'Sold Out'; 
 
     color: red; 
 
     font-family: cursive; 
 
     font-style: oblique; 
 
     font-weight: 900; 
 
    } 
 
    input.fade + label span, 
 
    input.fade:checked + label span { 
 
     -webkit-transition: background 0.4s linear; 
 
     -moz-transition: background 0.4s linear; 
 
     transition: background 0.4s linear; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <fieldset> 
 
    <legend>Demo #1</legend> 
 
    <input type='checkbox' name='chk1' id="chk1" class="fade" value='2' /> 
 
    <label for="chk1"><span></span> 
 
    </label> 
 
    <output id="out1" for="chk1"><span>&nbsp;&nbsp;&nbsp;&nbsp;</span> 
 
    </output> 
 
    </fieldset> 
 
</body> 
 

 
</html>

來源

2016-01-22 15:03:42 zer00ne

感謝您的回覆....不幸的是，HTML結構是剛性的，無法修改（即使冗餘，所有Div標籤也應該保留）。這似乎是純CSS解決方案的死衚衕.. – Sudarshan

確實如此，你看過SCSS，SASS還是LESS？我不確定，但這可能有幫助。 – zer00ne

使用純CSS選擇下一個基於孫子值的兄弟值

回答

相關問題