Question

我正在尝试将ID为的父div的CSS应用于具有CSS的子div。

需要申请

ui-selectlistbox-listcontainer类div height作为父div id="tableForm:mainTable:selectFilterMenu-crop"的100％。并且此代码子div是动态创建的。因此，只需应用height = 100％的CSS。

请建议我将CSS应用于子div高度为100％，

HTML：

<div id="tableForm:mainTable:selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px">
<div class="ui-selectlistbox-listcontainer" heigth="200px">
</div>
</div>

CSS：//不起作用

#tableForm:mainTable:selectFilterMenu-crop div.ui-selectlistbox-listcontainer {
    height: 100% !important;
}

Answer 1

您需要转义:

#tableForm\:mainTable\:selectFilterMenu-crop {
  border:2px solid;
}

#tableForm\:mainTable\:selectFilterMenu-crop div.ui-selectlistbox-listcontainer {
    height: 100% !important;
    background:red;
}

<div id="tableForm:mainTable:selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px">
<div class="ui-selectlistbox-listcontainer" >
</div>
</div>

Answer 2

浏览器将尝试读取：之后的部分作为伪元素。例如，如果您有一个ID my-id，并且想寻址before伪元素，那么您将编写

#my-id:before

尝试将:替换为-

#tableForm-mainTable-selectFilterMenu-crop div.ui-selectlistbox-listcontainer {
  height: 100% !important;
  background-color: gray;
}

<div id="tableForm-mainTable-selectFilterMenu-crop" class="ui-selectmanymenu ui-inputfield ui-widget ui-widget-content ui-corner-all" style="width:165px; height:270px">
  <div class="ui-selectlistbox-listcontainer" heigth="200px">
  </div>
</div>

HTML-应用CSS-父ID为id的子div与CSS的子div

2 个答案: