使用纯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选择下一个基于孙子值的兄弟值

回答

相关问题