【前端web入门第五天】01 结构伪类选择器与伪元素选择器

文章目录:

  • 1.结构伪类选择器

    • 1.1 nth-child(公式)
  • 2.伪元素选择器


1.结构伪类选择器

作用:根据元素的结构关系查找元素。

选择器说明
E:first-child查找第一个E元素
E:last-child查找最后一个E元素
E:nth-child(N)查找第N个E元素(第一个元素N值为1)

一个列表结构使用结构伪类选择器的例子

<style>
li:first-child{
background-color: green;
}
</style><body><ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li><li>li 6</li><li>li 7</li><li>li 8</li></ul>
</body>

在这里插入图片描述

1.1 nth-child(公式)

功能公式
偶数标签2n
奇数标签2n+1;2n-1
找到5的倍数标签5n
找到第5个以后的标签n+5
找到5个以前的标签-n+5

2.伪元素选择器

作用:创建虚拟元素(伪元素),用来摆放装饰性的内容。

选择器说明
E::before在E元素里面最前面添加一个伪元素
E::after在E元素里面最后面添加一个伪元素

注意点:

  • 必须设置content:" "属性,用来设置伪元素的内容,如果没有内容,则引号留空即可
  • 伪元素默认是行内显示模式
  • 权重和标签选择器相同

举个例子:

<style>
div{width: 300px;height: 300px;background-color: pink;
}
div::before{
content:"老鼠";
}
div::after{
content: "大米"";
}
</style>
<body>
<!--标签内容:老鼠爱大米-->
<div></div>
</body>
</html>

输出为:老鼠爱大米

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674754.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【若依】若依框架在本地运行的操作方法,及踩坑记录

若依框架简介 若依是一个Gitee上一个开源的基于SpringBoot开发的轻量级Java快速开发框架&#xff0c;用以快速构建后台管理系统&#xff0c;点击跳转到官方地址 本机部署过程 Step1. 下载项目源码 我选择的是直接下载zip压缩包&#xff0c;解压后得到如下文件夹&#xff0c…

基于YOLOv8的暗光低光环境下(ExDark数据集)检测,加入多种优化方式---自研CPMS注意力,效果优于CBAM ,助力自动驾驶(二)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了暗光低光数据集检测整个过程&#xff0c;从数据集到训练模型到结果可视化分析&#xff0c;以及如何优化提升检测性能。 &#x1f4a1;&#x1f4a1;&#x1f4a1;加入 自研CPMS注意力 mAP0.5由原始的0.682提升…

Syntax error on token “->“, : expected (jdk20 jdk8 switch)

Syntax error on token "->", : expected &#xff08;jdk20 jdk8 switch&#xff09; switch

Spring Boot的打包方式:JAR vs. WAR 打包方式

Spring Boot的打包方式&#xff1a;JAR vs. WAR 打包方式 Spring Boot是一个流行的Java开发框架&#xff0c;提供了快速、便捷的应用程序开发和部署方式。本文将介绍Spring Boot的两种常见打包方式&#xff1a;JAR和WAR。我们将深入探讨它们的特点、适用场景和部署方式&#xf…

Bpmn-js自定义Palette元素

Bpmn-js作为一个流程编辑器&#xff0c;常规的我们可以将其划分为几个功能区域&#xff0c;每个区域对应的负责不同的功能实现&#xff0c;bpmn-js的设计给我们留下了大量的留白和可扩展区域&#xff0c;其每一部分都可进行组合拼装&#xff0c;同时也支持我们的各种不同层次需…

Redis主从复制原理工作流程和常见问题

Redis主从复制原理 相信很多小伙伴都已经配置过主从复制&#xff0c;但是对于redis主从复制的工作流程和常见问题很多都没有深入的了解。咔咔这次用时俩天时间给大家整理一份redis主从复制的全部知识点。本文实现所需环境 centos7.0 redis4.0 一、什么是Redis主从复制&#x…

01动力云客之环境准备+前端Vite搭建VUE项目入门+引入Element PLUS

1. 技术选型 前端&#xff1a;Html、CSS、JavaScript、Vue、Axios、Element Plus 后端&#xff1a;Spring Boot、Spring Security、MyBatis、MySQL、Redis 相关组件&#xff1a;HiKariCP&#xff08;Spring Boot默认数据库连接池&#xff09;、Spring-Data-Redis&#xff08;S…

第十三、十四个知识点:用javascript获取表单的内容并加密

我们先来写一段代码&#xff1a; <body><form action"#" method"post">//写一个表单<span>用户名&#xff1a;</span><input type"text" id"username" name"username"><span>密码&a…

MyBatisPlus之分页查询及Service接口运用

一、分页查询 1.1 基本分页查询 配置分页查询拦截器 package com.fox.mp.config;import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor; import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor; import org.springfra…

总结-回想2023

目录 背景: 熬夜和机械的工作带给身体带来的负担: 过程: 总结: 背景: 2024年不知不觉时间已经过去一年了&#xff0c;这一年似乎是最快的一年&#xff0c;回想起3年之前自己在外面打工的日子&#xff0c;浑浑噩噩那是的感觉就是度日如年&#xff0c;每天都在同样的地点&…

Nginx 缓存集成、清除、设置不缓存资源

文章目录 前言1. web缓存服务1.1 原理1.2 指令1.2.1 proxy_cache_path1.2.2 proxy_cache1.2.3 proxy_cache_key1.2.4 proxy_cache_valid1.2.5 proxy_cache_min_uses1.2.6 proxy_cache_methods 2. 缓存案例3. 缓存的清除3.1 删除对应的缓存目录3.2 使用第三方扩展模块ngx_cache_…

《Django+React前后端分离项目开发实战:爱计划》 02 安装Python和Django

02 Installing Python and Django 《Django+React前后端分离项目开发实战:爱计划》 02 安装Python和Django Because Django is a Python web framework, we first have to install Python. 由于 Django 是一个 Python 网络框架,我们首先要安装 Python。 Installing Pytho…

【芯片设计- RTL 数字逻辑设计入门 11.1 -- 状态机实现 移位运算与乘法 1】

文章目录 移位运算与乘法状态机简介SystemVerilog中的测试平台VCS 波形仿真 阻塞赋值和非阻塞赋值有限状态机&#xff08;FSM&#xff09;与无限状态机的区别 本篇文章接着上篇文章【芯片设计- RTL 数字逻辑设计入门 11 – 移位运算与乘法】 继续介绍&#xff0c;这里使用状态机…

Leetcode 21:合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 例&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] public class title21 {public static void main(String[] args) {int[] l1{1…

设计一个可以智能训练神经网络的流程

设计一个可以智能训练神经网络的流程,需要考虑以下几个关键步骤: 初始化参数:设定初始的batch size和learning rate,以及其他的神经网络参数。训练循环:开始训练过程,每次迭代更新网络的权重。监控loss:在每个训练周期(epoch)后,监控loss的变化情况。动态调整:根据l…

运放偏置电流Ibs消除方法-简单粗暴的使用电阻

1 电阻应用电阻之运放如何消除偏置电流的影响 我们会发现一个问题&#xff0c;或者前辈告诉我们无论是电压跟随或者正相比例还是其他运放应用电路&#xff0c;一定要在正相输入端串入一个电阻&#xff0c;而且这个电阻的值等于反向输入端反馈电阻网络的并联。 为什么要这么做…

C语言笔试题之求出三角形的最大周长

实例要求&#xff1a; 1、给定由一些正数&#xff08;代表长度&#xff09;组成的数组 nums &#xff1b;2、返回 由其中三个长度组成的、面积不为零的三角形的最大周长 &#xff1b;3、如果不能形成任何面积不为零的三角形&#xff0c;返回 0&#xff1b; 案例展示&#xff…

2021-2025年全国科普教育基地

2021-2025年全国科普教育基地 第一批认定名单 序号 所在地区 申报单位 基地名称 推荐单位 1 北京市 中国科学院北京纳米能源与系统研究所 中国科学院北京纳米能源与系统研究所 中国材料研究学会 2 北京市 中国测绘科学研究院 中国测绘科学研究院 中国测绘学会 3…

代码随想录算法训练营day14||二叉树part01、理论基础、递归遍历、迭代遍历、统一迭代

递归遍历 &#xff08;必须掌握&#xff09; 本篇将介绍前后中序的递归写法&#xff0c;一些同学可能会感觉很简单&#xff0c;其实不然&#xff0c;我们要通过简单题目把方法论确定下来&#xff0c;有了方法论&#xff0c;后面才能应付复杂的递归。 这里帮助大家确定下来递归…

Mongodb聚合:$planCacheStats

执行查询时&#xff0c;MongoDB 查询规划器会根据可用索引选择并缓存效率最高的查询计划。$planCache可以返回所有集合的查询计划缓存信息。要使用$planCache&#xff0c;必须把$planCacheStats阶段放在管道最前面。 语法 { $planCacheStats: { } }使用 $planCacheStats必须…