覆盖父元素的CSS样式，而不会影响其他元素 [英] Override CSS style of parent element without affecting other elements

问题描述

我想知道如何显示包含在具有display：none特性的父元素中的元素。但将其他孩子留在那个父母下不受影响。这里有一个简单的例子：

 < div id =parent> 
< p id =item1>项目应显示< / p> 
< p id =item2>项目应显示< / p> 
< p id =item3>项目不应显示< / p> 
< div><！ -  / parent  - > 
 
< style> 
 #parent {display：none;} 
＃item3 {display：block！important;} 
< / style& 
  

所以在这个例子中，我想显示＃item3，儿童不显示。我知道有一些解决方法涉及改变每个单独的项目的CSS，但我正在处理几十个项目在这里，并想知道这是否可能，即使通过JS。提前感谢。

解决方案

为什么不改用：

 ＃parent> p {display：none;} 
＃item3 {display：block;} 
  pre> 
 
 
这样，父项中的所有p个子项都不会显示，但特定的＃item3将会显示。
 
 
I'd like to know how to display an element contained within a parent element that has "display:none" characteristics. But leave the other children under that parent untouched. Here's a simple example:
<div id="parent">
    <p id="item1">Item should show</p>
    <p id="item2">Item should show</p>
    <p id="item3">Item should not show</p>
<div><!--/parent-->

<style>
    #parent {display: none;}
    #item3 {display: block !important;}
</style>
So in this example, I want #item3 to be displayed, but the rest of #parent and its children not to show. I know there are workarounds that involve altering the CSS of every individual item, but I'm working with dozens of items here and was wondering if this is possible, even through JS. Thanks in advance.
解决方案
Why don't you use instead:
#parent>p{display:none;}
#item3{display:block;}
This way all p children in your parent won't show, but the specific #item3 will.


                        
这篇关于覆盖父元素的CSS样式，而不会影响其他元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！