Question

是否可以为元素定义CSS样式，仅当匹配元素包含特定元素（作为直接子项）时才应用？

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

注意：我正在尝试设置父元素的样式，具体取决于它包含的子元素。

<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功能。

Answer 1

据我所知，基于子元素设置父元素样式不是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');

结合CSS类：

.redBorder
{
    border: 1px solid red;
}

以下是jQuery "has" selector的文档。

Answer 2

基本上没有。以下将成为理论上的所在：

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

不幸的是它不存在。

有一些关于“为什么不能”的说法。 Shaun Inman的一个很好的装扮是非常好的：

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

Answer 3

在@ kp的回答之上：

我正在处理这个问题，在我的情况下，我必须显示一个子元素并相应地更正父对象的高度（由于某些原因，我没有时间自动调整大小在引导程序头中的工作调试）。

但是我没有使用javascript来修改父级，而是认为我会动态地向父级添加一个CSS类，并且CSS选择性地相应地显示子级。这将在逻辑中维护决策，而不是基于CSS状态。

tl; dr; 将a和b样式应用于父<div>，而不是孩子（当然，不是每个人都可以这样做。即Angular组件做出自己的决定。）

<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>

Answer 4

在我的情况下，我必须更改一个元素的单元格填充，该元素包含使用DataTables动态呈现的表的输入复选框：

width <- scan(text = '
0.00  0.00  1.85  4.00  5.70  6.40  7.40  8.00  9.70 
10.70 12.20 14.00 16.65 18.00 18.80 19.55 20.17 20.17')

depth <- scan(text = '
0.000  0.185  0.310  0.550  0.720  1.110  1.490  1.740  1.810  
2.000  1.920  1.680  1.530  0.600  -0.620 -0.760 -0.830 -0.998')

在initComplete函数中实现了以下行代码之后，我能够产生正确的填充，从而可以防止行以异常大的高度显示

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

现在，您可以看到已将正确的样式应用于父元素：

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

从本质上讲，此答案是@KP答案的扩展，但实施此方法的协作越多越好。总而言之，我希望这对其他人有所帮助，因为它有效！最后，非常感谢@KP带领我朝着正确的方向前进！

Answer 5

尝试

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

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

5 个答案: