如何使用css实现点击子元素时，整段文字被选中？

在前端开发中，使用纯CSS无法直接实现在点击子元素时整段文字被选中的功能。因为CSS主要用于样式描述，而不是用于交互行为。要实现点击选择文本的功能，你通常需要使用JavaScript或者jQuery。

然而，你可以通过一些技巧性的方法让用户更容易地选择整段文字。例如，你可以通过CSS设置用户选择的文本颜色和背景颜色，使得选中的文本更加突出：

::selection {
    background: #ffb7b7; /* WebKit/Blink Browsers */
    color: #ffffff;
}
::-moz-selection {
    background: #ffb7b7; /* Gecko Browsers */
    color: #ffffff;
}

这段代码将改变用户选中的文本的背景颜色和文字颜色。

如果你真的需要在点击某个子元素时自动选择整段文字，你可能需要使用JavaScript或jQuery。以下是一个简单的jQuery示例：

<div id="selectable-text">这是一段可以选择的文字。</div>
<button id="select-button">选择文字</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#select-button").click(function(){
    var text = $("#selectable-text");
    var range = document.createRange();
    range.selectNode(text[0]);
    
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
  });
});
</script>