在 css 问题之前选择元素答案

【问题标题】：Select element before it css issue在 css 问题之前选择元素
【发布时间】：2022-11-13 18:19:46
【问题描述】：

我需要在阅读更多内容之前选择段落，以便我可以将高度扩展到段落的全高。我不知道如何使用 :focus 选择器来选择它

.main {
  background: red;
}

button:focus **select the one div** {
  background: pink;
}

<div class="main">
  <div class="one"><p>This is a paragraph. Extra words, Bla Bla........</P></div>
  <button>Read More<button>
</div>

【问题讨论】：

我刚刚添加了段落

标签： css focus selector

【解决方案1】：

试试看。兄弟组合器只能这样工作。从上到下标签

<html> 
<head>
</head>
<body>

<div class="main">
   <button>Read More</button>
   <div class="one">some</div>
</div>

<style>
.main {
background: red;
}

button:hover + .one {
background: pink;
}

</style>

</body>
</html>

【讨论】：

【解决方案2】：

也许使用 :has() 伪类，但要注意它目前是不支持所有浏览器（尤其不是 Firefox）

.main:has(button:focus) .one>p {
   height:auto;
}

小提琴示例：https://jsfiddle.net/6me19dLy/

“我可以使用”报告：https://caniuse.com/css-has

【讨论】：