Javascript 使用CSS3隐藏元素

如果不存在仅使用CSS的

ul

s，他们是否有办法隐藏

strong

标记

<div class="lower lts-blue">    
    <strong>Interest Focus</strong>:
    <br/>

    <strong>Skills</strong>:
    <ul id="dnn_ctr2446_View_blSkills" class="tags">
        <li><a href="">Observing</a></li><li><a href="">Comparing &amp; Contrasting</a></li>
    </ul>
    <br/>

    <strong>Type</strong>: 
    <ul id="dnn_ctr2446_View_blType" class="tags">
        <li><a href="">Exemplars</a></li>
    </ul>        
</div>

关注焦点：


技能：





类型：

试试这个

div.lower > strong{
     display: none; /* or visibility: hidden; */
}

用于选择直接子级的

选择器。如果div有一个直接子元素

strong

，则该元素将被隐藏，而不是

ul

标记内的

strong

元素

有关更多信息，请查看此

更新：

如果您想隐藏

strong

元素，如果

div

中没有

ul

标记，那么可以使用javascript动态完成

Javascript

在上面的代码中，我向

strong

元素添加了一个class

dynamicStrong

，当且仅当

div

元素中没有

ul

标记时

检查

div

中是否有

ul

标记是通过在JavaScript代码中使用

if（！ul[0]）

来完成的

您还可以在for循环中使用javascript添加内联样式

strong[i].style.display = "none";

---

我不喜欢上面的方法，因为它创建了指定元素的内联样式，还覆盖了以前的css属性。

你能澄清一下“ul元素没有子元素是css”吗？@WilliamYang他们的意思是当标记为空时<代码>

与

相比。否。请参阅html标记兴趣焦点它没有ul child，因为它应该隐藏起来。目前，没有纯CSS方法来执行此逻辑。但是，如果您有办法选择前面的同级，您将能够通过选择

strong

元素作为

ul

的前面同级，并相应地设置其显示-这样

strong

el将仅在同级

ul

el存在时显示。不幸的是，这还不受支持。希望我们能在CSS4中看到这种情况，不过已经有人请求：@apaul34208我想OP也希望如此。如果

strong

位于

ul

内部，则它应可见，如果

strong

是

div

的直接子项，则它应隐藏。不是吗？

.dynamicStrong{
     display: none; /* or visibility: hidden; */
}

strong[i].style.display = "none";