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

我想隐藏一个div，因为它属于父级div，其属性data-ontarget设置为true。我试过以下，但没有任何反应。如何使用属性选择器更改子元素的CSS

如果我在下面的示例中的属性选择器之后删除类名，则整个父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; 
}

来源

2016-04-28 Steven De Backer

我已经测试你的代码和它的作品对我蛮好？ –

它适合我。您是否在HTML页面的顶部指定了文档类型？它必须是<！DOCTYPE html> – beerwin

更换opacity属性与display隐藏元素。

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

来源

2016-04-28 09:27:42 Dipak

谢谢。当我尝试你的解决方案时，它也没有工作，虽然它在我推入StackOverflow中的“运行代码片段”按钮时起作用。 –

我认为你缺少正确的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; 
}

来源

2016-04-28 09:45:47 Shashank

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

回答

相关问题