css:hover用法（1） 一个是伪类选择器前加空格改变所有子元素的样式； 一个是紧挨着的兄弟元素可以使用伪类选择器。

<template>
  <div>
    <h3>一个是伪类选择器前加空格改变所有子元素的样式，</h3>
    <h3>一个是紧挨着的兄弟元素可以使用伪类选择器。</h3>
    <div class="one">
      <div class="two">2</div>
      <div class="three">3</div>
      <div class="four">4</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "page",
  props: {},
  data() {
    return {
      name: "这是子组件的name",
    };
  },
  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
h3 {
  margin: 0 auto;
  font-size: 20px;
  color: #da56d0;
}
.one {
  margin: 0 auto;
  width: 600px;
  height: 400px;
  background: bisque;
  padding-top: 100px;
}

.two {
  margin: 0 auto;
  width: 200px;
  height: 100px;
  background: paleturquoise;
  border-radius: 50px;
}

.three {
  margin: 0 auto;