css基础练习三 -- 相邻选择器+写单选高亮效果 ｜常见选择器的使用less写法 ｜画圆形/三角

.shape {
  width: 100vw;
  height: 100vh;
  > div {
    height: 50%;
    .circle {
      background: #000;
      height: 100px;
      width: 100px;
      border-radius: 50%;
    }
    .triangle {
      width: 0;
      height: 0;
      border-left: 40px solid transparent;
      border-right: 40px solid transparent;
      border-bottom: 80px solid blue;
      // transform: rotate(90deg);
      // transform: rotate(180deg);
      transform: rotate(270deg); //旋转到你想要
    }
  }
}

 <div className={styles.shape}>
        <div>
          <div className={styles.circle}></div>
        </div>
        <div>
          <div className={styles.triangle}></div>
        </div>
 </div>

常见选择器： 后代  ｜ &  ｜ 子代 >  

相邻比较少用，用一个 单选高亮场景 使用相邻选择器+ 来练习

import styles from './Card.less';
export default () => {
  const label_word = ['1G', '2G', '3G'];
  return (
    <>
      组合选择器
      <div className={styles.selector}>
        <div>my boy</div>
        <div className={styles.name}>
          <div>I live in Duckburg.</div>
        </div>
        <div>my best</div>
        <div>
          <p>My best friend is Mickey.</p>
        </div>
        <p>My best friend is Mickey.</p>
        <div className={styles.check_content}>
          {label_word.map((item) => {
            return (
              <div className={styles.single_check}>
                <input
                  className={styles.input}
                  type="radio"
                  name="colors"
                  value="1"
                />
                <div className={styles.colors}>{item}</div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

.selector {
  width: 100vw;
  height: 100vh;
  //后代选择器，一层套一层的写法
  .name {
    background-color: blue;
    //（可以添加名字，达到动态样式的效果-会覆盖或者添加样式给它name选择器（看css原代码））
    & {
      color: rgb(124, 242, 124);
    }
    + div {
      //相邻选择器，name元素相邻元素
      background-color: chartreuse;
    }
  }
  //子元素选择器（一级）
  > p {
    background-color: red;
  }

  /**
  1. 最大盒子，让盒子是flex布局，item项目居中，换行效果
  2. 让 input 定位到层级比文字高
  3. 使用 input 框的 :checked  被chekc时候，使用 选择器+ 添加我们要效果

*/
  .check_content {
    border: 1px solid bisque;
    display: flex;
    flex-wrap: wrap; //可换行，处理多个标签换行效果
    justify-content: space-evenly;
    width: 20%;
    height: 7%;
    .single_check {
      margin: auto; //check_conten下的每一个一级子元素居中
      position: relative; //为了把按钮调整到合适的位置，并且层级要在文字之上，才有点的效果

      .input {
        position: absolute; //为了把按钮调整到合适的位置
        width: 100%; //把按钮调大，方便点击
        height: 100%; //把按钮调大，方便点击
        opacity: 0; //把input隐藏掉，更加好看，也不丢掉点击的效果
        &:checked + .colors {
          //当input被check时，会添加以下效果，+ 是相邻兄弟选择器（.input  + .colors），
          //具体每一个input 元素的相邻的元素colors，会被添加效果
          border: 1px solid #e63838;
          color: #e63838;
        }
      }
      .colors {
        background-color: #f5f5f5;
        font-size: 1rem;
        padding: 0 1.2rem;
        border-radius: 1.6rem;
      }
    }
  }
}