时间戳

首页 > 解决方案 > CSS 属性选择器：如何设置父元素的样式但使用子元素的属性？

css - CSS 属性选择器：如何设置父元素的样式但使用子元素的属性？

问题描述

基本上，我有一个 iframe，其中包含我要选择的 src 属性值。我的选择器查询和应用样式如下所示：

    .news-frame .news-modal.bt-custom-forms .modal-dialog iframe[src^="/sites/testSite/"] {
        width: 1286px !important;
    }

但是，我只想设置父 .modal-dialog 类的宽度属性而不是 iframe 的宽度。

知道如何实现这一目标吗？

谢谢！

标签： csscss-selectors

解决方案

不，CSS 还没有父选择器。

在 CSS 中

CSS4 选择器:has将解决您的问题，但目前不支持。

:has 的 MDN CSS 文档

在 JavaScript 中

/* select the result div */
let resultDiv = document.getElementById("result");

/* 
 * select the first modal with these classes :
 * querySelector select only the first
 * See querySelectorAll to select all results
 */
let modal = document.querySelector(
  ".news-frame .news-modal .bt-custom-forms .modal-dialog"
);

/* check for the iframe child attribute value */
let iframeElement = document.querySelector(
  '.news-frame .news-modal .bt-custom-forms .modal-dialog iframe[src^="https://"]'
);

/* querySelector return null if no result */
if (
  null !== iframeElement 
  && null !== modal
) {
  modal.style.width = "width: 1286px !important;";
  resultDiv.innerHTML += " Good website";
} else {
  resultDiv.innerHTML += " Wrong website";
}
<div id="test">
  <div class="news-frame">
      <div class="news-modal">
          <div class="bt-custom-forms">
              <div class="modal-dialog">
                  <iframe src="https://stackoverflow.com/questions/56073820/css-attribute-selectors-how-can-i-style-parent-element-but-use-attribute-of-chi#" width="300" heigth="200">
                      <p>Your browser does not support iframes.</p>
                  </iframe>
              </div>
          </div>
      </div>
  </div>

  <div id="result"></div>
</div>

document.querySelector 的 MDN JS 文档

推荐阅读