时间戳

首页 > 解决方案 > 如何根据父 div 是否为 display:none 创建 CSS 规则

html - 如何根据父 div 是否为 display:none 创建 CSS 规则

问题描述

我想根据设置为 display:none 的父元素通过 css 更改样式设置。

这是HTML：

<div id="mapLinkDiv" class="nav nav-second-level">
  <table class="NavSurvey" style="width:180px;">
    <tbody>
      <tr>
        <td>
          <a class="fixedResultsLink" href="/QBMapping/QBMap.aspx" title="Map results by State" target="MapByState">Map by State</a>
        </td>
      </tr>
    </tbody>
  </table>
  <table class="NavSurvey" style="width: 180px; margin-top:10px;">
    <tbody>
      <tr>
        <td style="font-size:12px; text-align:center;">Maps are underdevelopment and may not work properly</td>
      </tr>
    </tbody>
  </table>
</div>

所以我想要设置一个规则，如果 mapLinkDiv 是 display:none，那么从所有带有“fixedResultsLink”类的标签中删除 padding-left

这是我目前的CSS（在页面上）：

<style>
  a.fixedResultsLink{ 
    padding-left:28px;
  }
  #mapLinkDiv[style*='display:none'] a.fixedResultsLink {
    padding-left:0;
  }
</style>

到目前为止，我几乎没有发现什么可以帮助我解决这个问题，但是在谷歌中输入了错误的标准:)

需要明确的是，这是我正在研究的第二个 CSS 规则。

我怎样才能做到这一点？

标签： htmlcsscss-selectors

解决方案

#mapLinkDiv[style*='display:none'] a.fixedResultsLink 正在选择具有直接后代 a.fixedResultsLink 的 #mapLinkDiv。最简单但丑陋的方法是将 a.fixedResultsLink 的所有父标签插入到 css 选择器中。

#mapLinkDiv[style*='display:none'] table tbody tr td a.fixedResultsLink

推荐阅读