blocks|key|3272813|text|据我所知，基于子元素设置父元素的样式不是CSS的一个可用特性。为此，您可能需要编写脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3272814|如果你能像你说的那样做像div[div.a]或div:containing[div.a]这样的事情，那就太好了，但这是不可能的。|offset|length|style|CODE|3272815|您可能需要考虑使用jQuery。它的选择器可以很好地处理“包含”类型。您可以根据div的子内容选择div，然后在一行中将CSS类应用于父目录。|3272816|如果你使用jQuery，一些类似的东西可能会工作(未经测试，但理论是存在的)：|3272817|$('div:has(div.a)').css('border',+'1px+solid+red');|code-block|syntax|javascript|3272818|或|3272819|$('div:has(div.a)').addClass('redBorder');|3272820|与CSS类结合使用：|3272821|.redBorder
{
++++border:+1px+solid+red;
}|3272822|这是jQuery+"has"+selector的文档。|3272823|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/|1|http://api.jquery.com/has-selector/^0|0|C|A|N|L|0|9|6|0|0|0|0|0|0|0|0|2|L|1|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@$D|1H|E|1I|1|1J]]|A|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1L|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1M|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1N|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1O|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|1P|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|10|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|13|14|15|A|$16|19]]]]

<p>As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.</p>

<p>It'd be wonderful if you could do something like <code>div[div.a]</code> or <code>div:containing[div.a]</code> as you said, but this isn't possible. </p>

<p>You may want to consider looking at <a href="http://jquery.com" rel="noreferrer">jQuery</a>. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.</p>

<p>If you use jQuery, something along the lines of this would may work (untested but the theory is there):</p>

<pre><code>$('div:has(div.a)').css('border', '1px solid red');
</code></pre>

<p>or</p>

<pre><code>$('div:has(div.a)').addClass('redBorder');
</code></pre>

<p>combined with a CSS class:</p>

<pre><code>.redBorder
{
    border: 1px solid red;
}
</code></pre>

<p>Here's the documentation for the <a href="http://api.jquery.com/has-selector/" rel="noreferrer">jQuery "has" selector</a>.</p>


blocks|key|3059512|text|基本上，不是。以下是你在理论上想要的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3059513|div.a+<+div+{+border:+solid+3px+red;+}|code-block|syntax|javascript|3059514|不幸的是，它并不存在。|3059515|有一些关于“为什么不是地狱”的文章。Shaun+Inman的一个很好的补充是相当好的：|3059516|http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors|offset|length|3059517|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|1W|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|X|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Y|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|Z|8|@]|9|@$M|10|N|11|1|12]]|A|$]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|L]]]]

<p>Basically, no. The following <em>would</em> be what you were after in theory:</p>

<pre><code>div.a &lt; div { border: solid 3px red; }
</code></pre>

<p>Unfortunately it doesn't exist.</p>

<p>There are a few write-ups along the lines of "why the hell not". A well fleshed out one by Shaun Inman is pretty good:</p>

<p><a href="http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors" rel="noreferrer">http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors</a></p>


blocks|key|3059543|text|在@kp的回答之上：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3059544|我正在处理这个问题，在我的例子中，我必须显示子元素并相应地更正父对象的高度(由于某些原因，自动调整大小在引导标头中不起作用，我没有时间进行调试)。|3059545|但是，我不会使用javascript来修改父对象，而是动态地向父对象添加一个CSS类，并相应地有选择地显示子对象。这将维护逻辑中的决策，而不是基于CSS状态。|3059546|tl;dr;将a和b样式应用到父<div>，而不是子<div>(当然，不是每个人都能做到这一点。即，角度组件自己做出决定)。|offset|length|style|BOLD|CODE|3059547|<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>|code-block|syntax|javascript|3059548|entityMap^0|0|0|0|0|6|7|1|9|1|G|5|Q|5|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|W|8|@$H|X|I|Y|J|K]|$H|Z|I|10|J|L]|$H|11|I|12|J|L]|$H|13|I|14|J|L]|$H|15|I|16|J|L]]|9|@]|A|$]]|$1|M|3|N|5|O|7|17|8|@]|9|@]|A|$P|Q]]|$1|R|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|S|$]]

<p>On top of @kp's answer:</p>

<p>I'm dealing with this and in my case, I have to show a child element and correct the height of the parent object accordingly (auto-sizing is not working in a bootstrap header for some reason I don't have time to debug). </p>

<p>But instead of using javascript to modify the parent, I think I'll dynamically add a CSS class to the parent and CSS-selectively show the children accordingly. This will maintain the <em>decisions</em> in the logic and not based on a CSS state. </p>

<p><strong>tl;dr;</strong> apply the <code>a</code> and <code>b</code> styles to the parent <code>&lt;div&gt;</code>, not the child (of course, not everyone will be able to do this. i.e. Angular components making decisions of their own).</p>

<pre><code>&lt;style&gt;
  .parent            { height: 50px; }
  .parent div        { display: none; }
  .with-children     { height: 100px; }
  .with-children div { display: block; }
&lt;/style&gt;

&lt;div class="parent"&gt;
  &lt;div&gt;child&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
  // to show the children
  $('.parent').addClass('with-children');
&lt;/script&gt;
</code></pre>


blocks|key|313126|text|在我的例子中，我必须更改一个元素的单元格边距，该元素包含一个用DataTables动态呈现的表的输入复选框：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|313127|<td+class="dt-center">
++++<input+class="a"+name="constCheck"+type="checkbox"+checked="">
</td>|code-block|syntax|javascript|313128|在initComplete函数中实现以下代码后，我能够生成正确的填充，它修复了以异常大的高度显示行的问题|offset|length|313129|+$('tbody+td:has(input.a)').css('padding',+'0px');|313130|现在，您可以看到对父元素应用了正确的样式：|313131|<td+class="+dt-center"+style="padding:+0px;">
++++<input+class="a"+name="constCheck"+type="checkbox"+checked="">
</td>|313132|从本质上讲，这个答案是@KP答案的扩展，但实现这个问题的协作越多越好。总而言之，我希望这能帮助其他人，因为它是有效的！最后，非常感谢@KP带领我朝着正确的方向前进！|313133|entityMap|0|LINK|mutability|MUTABLE|url|https://datatables.net/reference/option/initComplete^0|0|0|1|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@$I|13|J|14|1|15]]|A|$]]|$1|K|3|L|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>In my case, I had to change the cell padding of an element that contained an input checkbox for a table that's being dynamically rendered with DataTables: </p>

<pre><code>&lt;td class="dt-center"&gt;
    &lt;input class="a" name="constCheck" type="checkbox" checked=""&gt;
&lt;/td&gt;
</code></pre>

<p>After implementing the following line code within the <a href="https://datatables.net/reference/option/initComplete" rel="nofollow noreferrer">initComplete</a> function I was able to produce the correct padding, which fixed the rows from being displayed with an abnormally large height</p>

<pre><code> $('tbody td:has(input.a)').css('padding', '0px');
</code></pre>

<p>Now, you can see that the correct styles are being applied to the parent element: </p>

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

<p>Essentially, this answer is an extension of @KP's answer, but the more collaboration of implementing this the better. In summation, I hope this helps someone else because it works! Lastly, thank you so much @KP for leading me in the right direction!</p>


<p>Is it possible to define a CSS style for an element, that is only applied if the matching element contains a specific element (as the direct child item)?</p>

<p>I think this is best explained using an example.</p>

<p><strong>Note</strong>: I'm trying to <strong>style the parent element</strong>, depending on what child elements it contains.</p>

<pre><code>&lt;style&gt;
  /* 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; }
&lt;/style&gt;

&lt;!-- the following div should have a red border because
     if contains a div with class="a" --&gt;
&lt;div&gt;
  &lt;div class="a"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;!-- the following div should have a blue border --&gt;
&lt;div&gt;
  &lt;div class="b"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Note 2</strong>: I know I can achieve this using javascript, but I just wondered whether this is possible using some unknown (to me) CSS features.</p>


Apply CSS styles to an element depending on its child elements

jQuery

是否可以为元素定义CSS样式，该样式仅在匹配的元素包含特定元素(作为直接子项)时应用？我认为用一个例子来解释这一点最好。注意：我正在尝试样式化父元素，这取决于它包含的子元素。<style>  /* note this is invalid syntax. I'm using the non-existing   ":c...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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