Question

我有两种类型的行的列表。每行包含许多字段。因此，基本上每一行都具有以下结构：

<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <div class="blue"> </div>
    </span>
  </div>      
</div>

对我来说，问题是我需要根据div class="views-row"内的div的类，使用class="fieldN"为父div应用CSS属性。它可以是“蓝色”或“黄色”。

因此，基于存储在范围内的div标签的类，我需要为外部div border-left“应用class="views-row属性

能否请您帮我实现这个目标？

Answer 1

据我所知，如果我很好地理解了您的问题，那么基于child元素设计父元素的样式不是CSS的可用功能。您可能需要为此编写脚本。

如果您能够像您说的那样做div [div.a]或div：contains [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

对于单个边框，不需要父选择器，您可以通过位置和伪造来伪造

.views-row {
border-left:solid red;
position:relative;
}
.views-row .blue:before {
content:'';
position:absolute;
top:0;
left:-3px; /* border width of parent if any */
bottom:0;
border-left:solid blue;
}
.views-row .yellow:before {
content:'';
position:absolute;
top:0;
left:-3px; /* border width of parent if any */
bottom:0;
border-left:solid yellow;
}

<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <span class="blue">i have a blue class, my parent should show a blue left border </span>
    </span>
  </div>      
</div>
<hr>
<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <span class="yellow"> i have a yellow class, my parent should show a yellow left border</span>
    </span>
  </div>      
</div>
<hr>
<div class="views-row">
  <div class="field1"></div>
  .....
  <div class="fieldN">
    <span>
      <span class=""> My class does not matter here, original red left border of parent remains seen</span>
    </span>
  </div>      
</div>

注意：：HTML结构现在有效，跨度只能包装措辞内容，而不能包含块内容。内部的div变成了一个范围以进行验证。

如何根据孩子的班级更改父母的CSS属性？

2 个答案: