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

Question

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

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

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

有什么想法要实现吗？

谢谢！

Answer 1

否，CSS还没有父选择器。

在CSS中

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

MDN CSS documentation for :has

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

MDN JS documentation for document.querySelector