CSS 属性选择器 : How can I style parent element but use attribute of child element?

Question

<分区>

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