演示简单，上下文和结构伪类选择器（0615）

html主题内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0615作业</title>
    <style>
    /*使用九宫格演示grid布局的实现*/
    .container{
            width: 300px;
            height: 300px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 5px;
        }
        .item{
            font-size: 2rem;
            background-color:cornflowerblue;
            display:flex;
            justify-content: center;
            align-items:center;
    </style>
</head>
<body>
    <div class="container">
        <div class="item" id="first">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>
</html>

1.简单选择器

<style>
 /* 元素选择器 ,设置了body的背景色*/
       body{
            background-color:cyan;
        }
        /* 类选择器，设置了所有class属性为item的边框宽度和颜色和线的类型 */
        .item{
            border: 1px solid black;
        }
        /* 复合类样式选择器，复合类样式的选择中间不能出现空格 */
        .item.center{
            background-color:blueviolet;
        }
        /* id选择器 */
        #first{
            background-color:lightcoral;
        }
        /* 层叠样式表：相同元素后面追加的样式会覆盖前面的样式 */
        #first{
            background-color:lightcyan;
        }
        /* 下方代码生效，上方#前面默认是*元素，优先级为元素<class<id,所以下方优先级更高 */
        .item#first{
            background-color:lightgreen;
        }
        /* 下方生效，前面是id选择器优先级大于上方的类选择器 */
        #first.item{
            background-color:lightpink;
        }
</style>

2.后代选择器

 /* 后代选择器，选择类属性为containerde为起点后面（子代，孙子或者更后一代）的所有的div标签并设置边框属性 */
        .container div{
            border: 2px solid black;
        }
        /* 父子选择器 ,只选择子代不会选择更下一代*/
        body>div{
            border:2px solid lightblue;
        }
        /* 同级相邻（下一个）选择器 */
        .item.center + .item{
            background-color: lightyellow;
        }
        /* 同级后面所有选择器 */
        .item.center  ~ .item{
            background-color: lightcoral;
        }

3.结构伪类选择器（不分组,不区分元素类型）

/* 匹配第一个元素 （前面要添加父级不然采用全文档递归方式匹配第一个元素）*/
        .container > :first-child{
            background-color:lightgray;
        }
        /* 匹配最后一个元素 */
        .container > :last-child{
            background-color:lightblue;
        }
        /* 任意选择一个 (索引是从1开始的)*/
        .container > :nth-child(3) {
            background-color:greenyellow;
        }
        /* 只选择偶数的单元格,n从1开始(css定义一些关键字进行表达奇偶数，偶数是even，奇数是odd)*/
        .container> :nth-child(2n){
            background-color:hotpink;
        }
        /* 只选择奇数的单元格 */
        .container > :nth-child(2n-1){
            background-color:lawngreen;
        }
        /* 从指定位置开始选择剩下所有元素比如从第四个开始选择(n是从0开始算起的) */
        .container > .item:nth-child(n+4){
            background-color:lightgoldenrodyellow;
        }
        /* 只取前三个 */
        .container > .item:nth-child(-n+3){
            background-color:lightseagreen;
        }
        /* 只取最后三个 */
        .container > .item:nth-last-child(-n+3){
            background-color:maroon;
        }
        /* 只取第7个,用倒数的方式更直观 */
        .container > .item:nth-last-child(3){
            background-color:mediumturquoise;
        }

4.结构伪类选择器（分组，区分元素类型）

分组结构伪类分两步
1，元素按类型/标签进行分组
2，在分组中根据索引进行选择

先把html主体内容进行一下更换(把第四个到第九个元素的div标签跟换成span标签)

<body>
    <div class="container">
        <div class="item" id="first">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>

换成

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

结构伪类选择器（分组）

/* 选择div分组中的最后一个 */
        .container div:last-of-type{
            background-color:mediumturquoise;
        }
        /* 匹配任何一个，比如选择span分组中的第三个 */
        .container span:nth-of-type(3){
            background:mediumvioletred;
        }
        /* 选择span分组中的前三个 */
        .container span:nth-of-type(-n+3){
            background-color:lightsalmon;
        }
        /* 选择span分组中最后两个，用倒数方式 */
        .container span:nth-last-of-type(-n+2){
            background-color:lightgreen;
        }

伪类和伪元素

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类和伪元素</title>
    <style>
        /* 先隐藏表单 */
      #login-form{
          display:none;
      }
      /* target:必须与id进行配合，可实现锚点操作 */
      /* 当#login-form的表单被a进行跳转时显示表单 */
      #login-form:target{
          display:block;
      }
      /* focus：当鼠标获取焦点的时候 改变表单的背景色*/
      input:focus{
          background-color:lightgray;
      }
      /* ::selection：设置选中文本的前景色和背景色（注意前面是双冒号） */
      input::selection{
          color:rgb(241, 9, 44);
          background-color:lime;
      }
      /* not用于选择不满足元素 */
      .list > li:not(:nth-of-type(3)){
          color:lightpink;
      }
      /* ::before：在...之前生成一个元素,还可以进行样式设置 */
      .list::before{
         content:"PHP中文网";
         background-color:lightgray;
         color:lightseagreen;
         font-size:1.3rem;
         border-bottom:2px solid black;
      }
      /* ::after：在...之后生成一个元素，还可以进行样式设置 */
      .list::after{
          content:"地址：.......";
          color:lightblue;
          font-size:2rem;
          border:2px solid lightgoldenrodyellow;
      }
</style>
</head>
<body>
    <a href="#login-form">我要登录</a>
    <form action="" method="post" id="login-form">
        <label for="email">邮箱：</label>
        <input type="email" name="email" id="email"></input>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password"></input>
        <button>登录</button>
    </form>
    <hr/>
    <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
</body>
</html>

伪类前面使用的是单冒号，伪元素前面使用的是双冒号

总结

1，对于选择器的了解并要记住其规则。
2，还需多看回放和练习，以防学到后面就忘记前面的内容。

html主题内容

1.简单选择器

2.后代选择器

3.结构伪类选择器（不分组,不区分元素类型）

4.结构伪类选择器（分组，区分元素类型）

换成

伪类和伪元素

总结

相关文章