代码之家  ›  专栏  ›  技术社区  ›  M4N

根据元素的子元素将CSS样式应用于元素

  •  157
  • M4N  · 技术社区  · 15 年前

    我认为最好用一个例子来解释这一点。

    当前位置我正在努力 ,具体取决于它包含的子元素。

    <style>
      /* note this is invalid syntax. I'm using the non-existing
       ":containing" pseudo-class to show what I want to achieve. */
      div:containing div.a { border: solid 3px red; }
      div:containing div.b { border: solid 3px blue; }
    </style>
    
    <!-- the following div should have a red border because
         if contains a div with class="a" -->
    <div>
      <div class="a"></div>
    </div>
    
    <!-- the following div should have a blue border -->
    <div>
      <div class="b"></div>
    </div>
    

    附注2 :我知道我可以使用javascript实现这一点,但我只是想知道是否可以使用一些未知(对我来说)的CSS功能。

    4 回复  |  直到 12 年前
        1
  •  132
  •   Nisse Engström sting_roc    7 年前

    据我所知,基于子元素设计父元素的样式不是CSS的可用功能。您可能需要为此编写脚本。

    div[div.a] div:containing[div.a]

    你可能想考虑一下 jQuery . 它的选择器可以很好地处理“包含”类型。您可以根据其子内容选择div,然后在一行中将CSS类应用于父类。

    如果您使用jQuery,那么类似的方法可能会奏效(未经测试,但理论是存在的):

    $('div:has(div.a)').css('border', '1px solid red');
    

    $('div:has(div.a)').addClass('redBorder');
    

    .redBorder
    {
        border: 1px solid red;
    }
    

    这是这个项目的文档 jQuery "has" selector .

        2
  •  69
  •   Nisse Engström sting_roc    7 年前

    基本上没有。下面是 从理论上说,你追求的是什么:

    div.a < div { border: solid 3px red; }
    

    不幸的是,它并不存在。

    http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

        3
  •  1
  •   Mauricio Morales    7 年前

    在@kp的回答之上:

    我正在处理这个问题,在我的例子中,我必须显示一个子元素并相应地更正父对象的高度(由于某些原因,我没有时间调试,自动调整大小在引导标头中不起作用)。

    决定

    tl;博士 应用 a b <div>

    <style>
      .parent            { height: 50px; }
      .parent div        { display: none; }
      .with-children     { height: 100px; }
      .with-children div { display: block; }
    </style>
    
    <div class="parent">
      <div>child</div>
    </div>
    
    <script>
      // to show the children
      $('.parent').addClass('with-children');
    </script>
    
        4
  •  0
  •   miles    5 年前

    在我的例子中,我必须更改元素的单元格填充,该元素包含正在使用DataTables动态呈现的表的输入复选框:

    <td class="dt-center">
        <input class="a" name="constCheck" type="checkbox" checked="">
    </td>
    

    initComplete 函数I能够生成正确的填充,从而修复了行以异常大的高度显示的问题

     $('tbody td:has(input.a)').css('padding', '0px');
    

    <td class=" dt-center" style="padding: 0px;">
        <input class="a" name="constCheck" type="checkbox" checked="">
    </td>
    

    从本质上讲,这个答案是@KP答案的扩展,但实现这个答案的合作越多越好。总之,我希望这对其他人有所帮助,因为它是有效的!最后,非常感谢@KP为我指引了正确的方向!