如果你想用javascript

<section id="container">
      <div id="parent">
        <p style="display: none;">P1</p>
        <p style="display: none;">P2</p>
      </div>
    </section>

const parent = document.getElementById("parent");
const container = document.getElementById("container");

let hasNoneDisplay = 0;

parent.childNodes.forEach((node) => {
  node.style?.display === "none" && hasNoneDisplay++;
});

if (hasNoneDisplay === parent.childNodes.length) {
  //do what you want...
}

使用:has选择器。请注意，这是一个非常新的CSS功能，因此尚未得到所有主流浏览器（如Firefox）的支持。

section:has(p[style='display: none']) {
  background: red;
  width: 100px;
  height: 100px;
}

要确认所有的子元素都与特定的属性值匹配，最好的方法是使用:not选择器来选择任何其他可能的值，如果其他可能的值是无限的，并且您必须处理每一种情况，那么我认为您将不得不求助于JavaScript。
示例;

section:has(p[style='display: none']):not(:has(p[style='display: inline'])) {
  background: red;
  width: 100px;
  height: 100px;
}

Demo