search

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

前端选择器的认识

阿杰
阿杰原创
2020年06月18日 11:32:48665浏览

基本代码与效果

  • 九宫格代码基础及样式

    1.   <style>
    2.       .container{
    3.           width: 300px;
    4.           height: 300px;
    5.           display: grid;
    6.           grid-template-columns: repeat(3,1fr);
    7.           gap: 5px;
    8.       }
    9.       .item{
    10.           font-size: 24px;
    11.           background-color: lightskyblue;
    12.           display: flex;
    13.           justify-content: center;
    14.           align-items: center;
    15.       }
    16.   </style>
    18.   <body>
    19.       <div class="container">
    20.           <div class="item">1</div>
    21.           <div class="item">2</div>
    22.           <div class="item">3</div>
    23.           <div class="item">4</div>
    24.           <div class="item center">5</div>
    25.           <div class="item">6</div>
    26.           <div class="item">7</div>
    27.           <div class="item">8</div>
    28.           <div class="item">9</div>
    29.       </div>
    30.   </body>
  • 九宫格效果

1. 简单选择器

  • 元素选择器：标签选择器
  1.         body{
  2.             background-color: lightcyan;
  3.         }
  • 类选择器：对应着html标签中的class属性
  1.         .item{
  2.             border: 1px solid #000;
  3.         }
  4.         /* 多个类复合应用 */
  5.         .item.center{
  6.             background-color: green;
  7.         }
  • id选择器：对应着html标签中的id属性
  1.         /* id选择器 */
  2.         #first{
  3.             background-color: lightpink;
  4.         }
注意事项
  1. id,class可以添加到任何元素上，所以可以省略*
  2. 层叠样式表，相同元素，后面追加的样式会覆盖前面的样式
  3. 选择器优先级： 元素 < class < id,属于元素，所以.item#first样式会覆盖*#first，就是.item#first优先级高于#first
    1.      .item#first{
    2.          background-color: lightpink;
    3.      }
    4.      #first{
    5.          background-color: yellow;
    6.      }
    7.      #first.item{
    8.          background-color: red;
    9.      }
    10.      /*最后背景颜色显示red(红色)*/
  4. id选择器的应用场景目前只有两种：表单元素、锚点

2.上下文选择器

  • 后代选择器：通过空格
  1.         /*1. 后代选择器:空格*/
  2.         .container div{
  3.             border: 1px solid #000000;
  4.         }

  • 父子选择器：通过 > 号
  1.         /* 2.父子选择器: > */
  2.         body > div{
  3.             border: 5px solid coral;
  4.         }

  • 同级相邻选择器（给第五个item类加一个center类，然后给它同级下一个标签添样式）
  1.         /* 3.同级相邻选择器 */
  2.         .item.center + .item{
  3.             background-color: lightgreen;
  4.         }

  • 同级所有选择器（给第五个item后面的同级标签添加样式）
  1.         /* 4.同级所有选择器 */
  2.         .item.center ~ .item{
  3.             background-color: lightsalmon;
  4.         }

3.结构伪类选择器

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

    1.       /* 匹配第一个元素 */
    2.       :first-child{
    3.           background-color: wheat;
    4.       }

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

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

    2.       /* 选择偶数单元格 */
    3.       .container > :nth-child(2n){
    4.           /* background-color: limegreen; */
    5.       }
    6.       .container > :nth-child(even){
    7.           background-color: limegreen;
    8.       }
    10.       /* 选择奇数单元格 */
    11.       .container > :nth-child(2n-1){
    12.           /* background-color: magenta; */
    13.       }
    14.       .container > :nth-child(odd){
    15.           background-color: magenta;
    16.       }

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

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

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

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

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

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


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

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

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


    取前三个和后三个

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

4.伪类与伪元素

基本示例标签

  1.     <a href="#login-form">我要登录</a>
  2.     <form action="" method="post" id="login-form">
  3.         <label for="email">邮箱：</label>
  4.         <input type="email" name="email" id="email">
  5.         <label for="password">密码</label>
  6.         <input type="password" name="password" id="password">
  7.         <button>登录</button>
  8.     </form>

  • 伪类 :target

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

  • 伪类 :focus

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

  • 伪类 :not（）

    1.   <ul class="list">
    2.       <li class="item">1</li>
    3.       <li class="item">2</li>
    4.       <li class="item">3</li>
    5.       <li class="item">4</li>
    6.   </ul>
    1.       /* :not(): 用于选择不满足条件元素 */
    2.       .list > :not(:nth-of-type(3)){
    3.           color: red;
    4.       }

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

    1.       /* ::before */
    2.       .list::before{
    3.           content: "购物车";
    4.           color: blue;
    5.           font-size: 1.5rem;
    6.           border-bottom: 1px solid #000000;
    7.       }
    8.       /* ::after */
    9.       .list::after{
    10.           content: "结算中...";
    11.           color: red;
    12.           font-size: 1.1rem;
    13.       }


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

上一条：第五课：表格和表单的介绍及作业的理解！下一条：为什么推荐你学Python？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多