如何使用屬性選擇器更改子元素的CSS

Question

我想隱藏一個div，它屬於父div，其屬性data-ontarget設置為true。 我嘗試了以下，但沒有任何反應。

如果我在下面的示例中刪除屬性選擇器后面的類名，則整個父div變為隱藏。 因此，屬性選擇器可以工作，但不能與搜索子類相結合。

這是我嘗試過的：HTML：

<div class="myClass" data-ontarget="false">
        <img src="myImage1.png"/>
        <div class="myImage">This is my image 1</div>
</div>
<div class="myClass" data-ontarget="true">
        <img src="myImage2.png"/>
        <div class="myImage">This is my image 2</div>
</div>

CSS：

[data-ontarget="true"] .myImage{
    display: none;
}

Answer 1

用display替換opacity屬性以隱藏元素。

 .input_container[data="true"] .awsome_input_border{ opacity: .5; } .input_container[data="false"] .awsome_input_border{ opacity: 1; } 

 <div class="input_container" data="true"> <span class="awsome_input_border"/> hide me!! </div> <div class="input_container" data="false"> <span class="awsome_input_border"/> hide me!! </div> 

Answer 2

我認為你錯過了正確的CSS，這使你的目標div隱藏起來。

請參閱此處的演示。

請找到以下代碼：

HTML：

<div class="parent">
  <div class="myClass" data-ontarget="false">
    <img src="myImage1.png" />
    <div class="myImage">This is my image 1</div>
  </div>
  <div class="myClass" data-ontarget="true">
    <img src="myImage2.png" />
    <div class="myImage">This is my image 2</div>
  </div>
</div>

CSS：

.parent > div[data-ontarget="true"] {
  display: none;
}