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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 演示简单，上下文和结构伪类选择器（0615）

博主信息

博文 48

粉丝 0

访问量 45827

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

丶久而旧之丶

原创

864人浏览过

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>