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隐藏起来。

请参阅演示here。

请找到以下代码：

<强> 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;
}

如何使用属性选择器更改子元素的CSS

2 个答案: