前端选择器的认识 - 前端学习

首页 > 博客列表 > 前端选择器的认识

博主信息

博文 98

粉丝 1

访问量 84416

专题推荐

更多>

基本代码与效果

九宫格代码基础及样式

  <style>
      .container{
          width: 300px;
          height: 300px;
          display: grid;
          grid-template-columns: repeat(3,1fr);
          gap: 5px;
      }
      .item{
          font-size: 24px;
          background-color: lightskyblue;
          display: flex;
          justify-content: center;
          align-items: center;
      }
  </style>
  <body>
      <div class="container">
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item center">5</div>
          <div class="item">6</div>
          <div class="item">7</div>
          <div class="item">8</div>
          <div class="item">9</div>
      </div>
  </body>

九宫格效果

1. 简单选择器

元素选择器：标签选择器

        body{
            background-color: lightcyan;
        }

类选择器：对应着html标签中的class属性

        .item{
            border: 1px solid #000;
        }
        /* 多个类复合应用 */
        .item.center{
            background-color: green;
        }

id选择器：对应着html标签中的id属性

        /* id选择器 */
        #first{
            background-color: lightpink;
        }

注意事项

id,class可以添加到任何元素上，所以可以省略*
层叠样式表，相同元素，后面追加的样式会覆盖前面的样式

选择器优先级：元素 < class < id,属于元素，所以.item#first样式会覆盖*#first，就是.item#first优先级高于#first

     .item#first{
         background-color: lightpink;
     }
     #first{
         background-color: yellow;
     }
     #first.item{
         background-color: red;
     }
     /*最后背景颜色显示red(红色)*/

id选择器的应用场景目前只有两种：表单元素、锚点

2.上下文选择器

后代选择器：通过空格

        /*1. 后代选择器:空格*/
        .container div{
            border: 1px solid #000000;
        }

父子选择器：通过 > 号

        /* 2.父子选择器: > */
        body > div{
            border: 5px solid coral;
        }

同级相邻选择器（给第五个item类加一个center类，然后给它同级下一个标签添样式）

        /* 3.同级相邻选择器 */
        .item.center + .item{
            background-color: lightgreen;
        }

同级所有选择器（给第五个item后面的同级标签添加样式）

        /* 4.同级所有选择器 */
        .item.center ~ .item{
            background-color: lightsalmon;
        }

3.结构伪类选择器

不分组（不区分元素类型）

      /* 匹配第一个元素 */
      :first-child{
          background-color: wheat;
      }

      /* 最后一个子元素 */
      .container > :last-child{
          background-color: yellow;
      }

      /* 选第三个：索引是从1开始 */
      .container > :nth-child(3){
          background-color: limegreen;
      }


      /* 选择偶数单元格 */
      .container > :nth-child(2n){
          /* background-color: limegreen; */
      }
      .container > :nth-child(even){
          background-color: limegreen;
      }
      /* 选择奇数单元格 */
      .container > :nth-child(2n-1){
          /* background-color: magenta; */
      }
      .container > :nth-child(odd){
          background-color: magenta;
      }

      /* 从指定位置(第四个开始），选择剩下的所有元素 */
      .container > .item:nth-child(n+4){
          background-color: limegreen;
      }

      /* 只取前三个 */
      .container > .item:nth-child(-n+3){
          background-color: limegreen;
      }
      /* 只取最后三个 */
      .container > .item:nth-last-child(-n+3){
          background-color: limegreen;
      }

分组
先把九宫格元素分两组

  <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <span class="item">4</span>
      <span class="item">5</span>
      <span class="item">6</span>
      <span class="item">7</span>
      <span class="item">8</span>
      <span class="item">9</span>
  </div>

如果只用:last-of-type，会各自给div和span的最后一位添加样式

      /* 分组结构伪类分两步
      1.元素按类型进行分组
      2.在分组中根据索引进行选择
      */
      .container :last-of-type{
          background-color: violet;
      }

如果在:last-of-type前加上类型进行区分，就只会给指定类型最后一位添加样式

      /* 分组结构伪类分两步 
      1.元素按类型进行分组
      2.在分组中根据索引进行选择
      */
      .container span:last-of-type{
          background-color: violet;
      }


      /* 在分组中匹配任何一个 */
      .container span:nth-of-type(3){
          background-color: violet;
      }

取前三个和后三个

      /* 取前三个 */
      .container span:nth-of-type(-n+3){
          background-color: limegreen;
      }
      /* 取后三个 */
      .container span:nth-last-of-type(-n+3){
          background-color: violet;
      }

4.伪类与伪元素

基本示例标签

    <a href="#login-form">我要登录</a>
    <form action="" method="post" id="login-form">
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email">
        <label for="password">密码</label>
        <input type="password" name="password" id="password">
        <button>登录</button>
    </form>

伪类 :target

      #login-form{
          display: none;
      }
      /* :target: 必须id配合,实现锚点操作 */
      /* 当前#login-form的表单元素被a的锚点激活的时候执行 */
      #login-form:target{
          display: block;
      }

伪类 :focus

      /* :focus: 当获取焦点的时候 */
      input:focus{
          background-color: yellow;
      }

伪类 :not（）

  <ul class="list">
      <li class="item">1</li>
      <li class="item">2</li>
      <li class="item">3</li>
      <li class="item">4</li>
  </ul>

      /* :not(): 用于选择不满足条件元素 */
      .list > :not(:nth-of-type(3)){
          color: red;
      }

伪元素 ::before与::after （伪元素不为页面中的元素）

      /* ::before */
      .list::before{
          content: "购物车";
          color: blue;
          font-size: 1.5rem;
          border-bottom: 1px solid #000000;
      }
      /* ::after */
      .list::after{
          content: "结算中...";
          color: red;
          font-size: 1.1rem;
      }

(注意：伪元素签名是双冒号，伪类前面是单冒号)

批改老师：

WJ

批改状态：合格

老师批语：写的非常努力，认真！

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

vue学习

2020-06-22 12:55:07