CSS问题：如何用:focus选择器选中「查看更多」按钮前的元素？

首先明确：原生CSS没有前置兄弟选择器，没法直接通过button:focus选中它前面的.one元素。给你两个可行的办法：

办法一：调整HTML结构（推荐） #

把按钮移到.one元素前面，这样就能用相邻兄弟选择器+来选中目标元素：

修改后的HTML：

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

对应的CSS：

.main {
  background: red;
}

button:focus + .one {
  background: pink;
  height: auto; /* 替换成你需要的完整高度值，比如去掉之前的固定高度限制 */
}

办法二：用JavaScript实现（不调整结构的情况） #

如果没法修改HTML结构，就用JS监听按钮的焦点事件，给.one元素添加/移除样式类：

CSS新增样式类：

.main {
  background: red;
}

.one.expanded {
  background: pink;
  height: auto;
}

JS代码：

const readMoreBtn = document.querySelector('button');
const targetDiv = document.querySelector('.one');

readMoreBtn.addEventListener('focus', () => {
  targetDiv.classList.add('expanded');
});

readMoreBtn.addEventListener('blur', () => {
  targetDiv.classList.remove('expanded');
});

内容的提问来源于stack exchange，提问作者InterPixel