如果你想使用JS，如果一个元素的子元素有id="detail"，你需要做的是改变元素的宽度：

const parentEl = document.querySelector(".ui-dialog")
const childEl = parentEl.querySelector("#detail")

if(childEl) parentEl.style.width = '51em'

字符串

// I created a li element after three seconds so you can understand better
setTimeout(() => {
var newListItem = document.createElement("li");
newListItem.id = "detail";
newListItem.textContent = "Three";

var existingList = document.querySelector(".ui-dialog");

existingList.appendChild(newListItem);
}, 3000)

.ui-dialog{
    width: 100px;
    background: red;
}
.ui-dialog:has(#detail){
    width: 51em;
    background: green;
}

<ul class="ui-dialog">
<li class='child'>one</li>
<li class='child'>two</li>
</ul>

在这个例子中，如果没有id detail的孩子，颜色是红色的，但是当孩子被创建并添加到我们现有的List中时，它使用：has（）css