Question

如何根据内容类型为css元素设置样式或添加类。我的例子：我希望在包含像这样的iframe时添加一个p元素的类或样式。

<p><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://www.hashdoc.com/documents/185392/embed" style="border:1px solid #EAE9EA; border-width:1px; margin-bottom:5px; max-width: 100%;" title="Les résultats aux examens" width="550"></iframe></p>

所以它可能是这样的：

if p contain iframe add class 'myclass' to p

我能用sass做这件事还是需要js？

编辑：我最后的jquery代码

$(".page-lycee p:has(iframe)").addClass('external-content');

Answer 1

您可以使用.has()来检查p是否有iframe，如下所示：

$("p").has("iframe").addClass('myClass');

.myClass{
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://www.hashdoc.com/documents/185392/embed" style="border:1px solid #EAE9EA; border-width:1px; margin-bottom:5px; max-width: 100%;" title="Les résultats aux examens"
    width="550">
  </iframe>
</p>

<p> This will not have the class "myClass"</p>

Answer 2

您可以使用jQuery选择器:has()

$("p:has(iframe)").css("border", "solid red");

例如： https://www.w3schools.com/jquery/sel_has.asp

Answer 3

据我所知，CSS目前无法实现。你可以用jQuery解决这个问题。

示例代码：

$('p:has(iframe)').addClass('myclass');

条件css取决于内容

3 个答案: