HTML(14)——结构伪类选择器和伪元素选择器

结构伪类选择器

作用:

根据元素的结构关系查找元素

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

例如:查找第一个li标签,将背景改为绿色

    <style>

        li:first-child {

            background-color: green;

        }

    </style>

:nth-child(公式)

作用:可以根据元素的结构关系查找多个元素。

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

例如:将偶数标签的背景的改为绿色

    <style>

        li:nth-child(2n) {

            background-color: green;

        }

    </style>

    <ul>

        <li>111</li>

        <li>222</li>

        <li>333</li>

        <li>444</li>

        <li>555</li>

        <li>666</li>

        <li>777</li>

        <li>888</li>

        <li>999</li>

        <li>AAA</li>

        <li>BBB</li>

        <li>CCC</li>

        <li>DDD</li>

    </ul>

伪元素选择器

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

写法:

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

注意:

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

例如:

div::before {

            content: "JAVA";

        }

        div::after {

            content: "饭";

        }

<div>炒</div>

最终结果为JAVA炒饭 

 

 

同时也可以添加其他的样式

        div::before {content: "JAVA";width: 40px;height: 40px;background-color: aqua;display: block;}div::after {content: "饭";width: 40px;height: 40px;background-color: bisque;display: block;}div {width: 300px;height: 300px;background-color: brown;}<div>炒</div>

效果为:

 

 

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

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

相关文章

超越招聘技术人才目标的最佳技术招聘统计数据

研究发现&#xff0c;难以找到的人才比以往任何时候都更难找到&#xff1a;根据新人才委员会招聘调查报告&#xff1a;2024年难以找到的人才的战略和战略&#xff0c;60%的受访者表示&#xff0c;熟练人才的招聘时间比一年前长。调查进一步揭示了以下关于招聘技术的关键事实&am…

Git 常用命令,一文全搞懂

注意&#xff1a;每一次切换分支的时候&#xff0c;本地代码都会自动跟随改变&#xff0c;不需要重新pull,除非有人更新了代码 git remote add origin 地址 连接远程仓库 git clone 地址 克隆项目到本地 git init 更新本地隐藏文件初始化仓库 git add . 代…

Java--Data类

1.Data类 java.util.Date.表示指定的时间信息&#xff0c;不支持国际化 构造方法 new Date()&#xff1a;当前系统日期和时间 new Date(long)&#xff1a;给定日期和时间 主要方法&#xff1a; after(Date):判断当前日期对象是否在给定日期对象之后 before(Date):判断当前日期…

基础购物车(Javascript)

使用Javascript写一个基础购物车&#xff0c;其中包含商品数量加加减减&#xff0c;下面的总价和总数量跟着商品数量变动&#xff0c;还可以自己添加需要的商品。 基础购物车的结构样式如下&#xff1a; HTML代码&#xff1a; <body><table border"1px" c…

LeetCode26. 删除有序数组中的重复项题解

LeetCode26. 删除有序数组中的重复项题解 题目链接&#xff1a; https://leetcode.cn/problems/remove-duplicates-from-sorted-array 题目描述&#xff1a; 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一…

JavaWeb——Mysql的启动/登录/卸载

目录 1.Mysql服务器 2.Mysql的简单使用 2.1 启动Mysql&#xff1a; 2.2 登录Mysql 2.3 退出 3. 连接别人的数据库 4.卸载mqsql 1.Mysql服务器 安装了Mysql的计算机都成为Mysql服务器 2.Mysql的简单使用 2.1 启动Mysql&#xff1a; 第一种方法&#xff1a;搜索服务&am…

一文读懂交换机MAC地址表:五大关键点,图解21步

HCIA 新班开课了华为HCIA课程介绍苏州面授班 | 全国直播班循环开班&#xff0c;免费重学前言 什么是MAC地址表?MAC地址表有什么作用&#xff1f;MAC地址表里面包含了哪些要素&#xff1f;今天带你好好唠唠。 我们以一个案例为例&#xff1a; 如上图&#xff1a;PC1和PC2通…

2024.6.24 IDEA中文乱码问题(服务器 控制台 TOMcat)实测已解决

1.问题产生原因&#xff1a; 1.文件编码不一致&#xff1a;如果文件的编码方式与IDEA设置的编码方式不一致&#xff0c;就会产生乱码。确保文件和IDEA使用相同的编码&#xff0c;通常是UTF-8。2.IDEA设置问题&#xff1a;检查IDEA的全局编码设置和项目编码设置是否正确。3.终端…

adb 查看哪些应用是双开的

adb shell pm list users 得到 这 里有 user 0 ,11,999 其中0是系统默认的&#xff0c;11是平行空间的&#xff0c;999是双开用户 pm list packages --user 999 -3 得到了999用户安装第三方应用的包名 pm list packages --user 11 -3 得到了隐私空间用户安装第三方应用的…

Windows环境如何ssh远程连接本地局域网内的Archcraft系统

文章目录 前言1. 本地SSH连接测试2. Archcraft安装Cpolar3. 配置 SSH公网地址4. 公网远程SSH连接小结 5. 固定SSH公网地址6. SSH固定地址连接 前言 本文主要介绍如何在Archcraft系统中安装Cpolar内网穿透工具,并以实现Windows环境ssh远程连接本地局域网Archcraft系统来说明使用…

React+TS 从零开始教程(2):简中简 HelloWolrd

源码链接&#xff1a;https://pan.quark.cn/s/c6fbc31dcb02 这一节&#xff0c;我们来见识ReactTS的威力&#xff0c;开始上手开发第一个组件&#xff0c;什么组件呢&#xff1f; 当然是简中简的 HelloWolrd组件啦。 在src下创建一个components&#xff0c;然后新建Hello.tsx …

mp4转换成mp3怎么转?教你几种值得收藏的转换方法!

mp4转换成mp3怎么转&#xff1f;MP4&#xff0c;这一深入人心的数字多媒体容器格式&#xff0c;无疑在当今数字世界中占据了一席之地&#xff0c;那么&#xff0c;它究竟有何过人之处呢&#xff1f;首先&#xff0c;MP4的跨平台兼容性是其一大亮点&#xff0c;不论是在Windows的…

MySQL字典数据库设计与实现 ---项目实战

软件准备✍&#xff1a;Mysql与Navicat可视化命令大全 ----项目实战 文章前言部分 目录 一.摘要 二.设计内容 三.项目实现 一.摘要 本项目关注于字典数据库表结构的设计和数据管理。通过现有的sql文件&#xff0c;实现system_dict_type和system_dict_data两个数据表。随后…

文本批量高效编辑神器:空格秒变分隔符,提升工作效率

在信息爆炸的时代&#xff0c;文本处理已成为我们日常工作中不可或缺的一部分。然而&#xff0c;面对海量的文本数据&#xff0c;如何高效、准确地进行编辑和整理&#xff0c;成为了我们面临的难题。今天&#xff0c;我要向大家介绍一款文本批量高效编辑神器——首助编辑高手&a…

微信小程序轮播图

效果图 详情可见 微信小程序 参照&#xff1a;swiper | uni-app官网 代码&#xff1a; <!--轮播图-- > <swiper interval"2000" autoplay"true" circular"true" style"height: 300px;"><swiper-item style&qu…

Redis—String数据类型及其常用命令详解

文章目录 Redis概述1.Redis-String数据类型概述2.常用命令2.1 SET&#xff1a;添加或者修改已经存在的一个String类型的键值对2.2 GET&#xff1a;根据key获取String类型的value2.3 MSET&#xff1a;批量添加多个String类型的键值对2.4 MGET&#xff1a;根据多个key获取多个Str…

前后端分离项目面试总结

一&#xff1a;是否登录状态 服务端登录的时候&#xff0c;给分配一个session用于存储数据&#xff0c;同时将sessionID返回给浏览器&#xff0c;浏览器通过cookie把sessionID存储起来&#xff0c;下次访问时携带上&#xff0c;服务端就可以通过sessionID来确定用户是否登录。 …

pdf压缩大小,PDF压缩大小不影响清晰度

你是否曾为PDF文件过大而烦恼&#xff1f;想要分享或上传文件时&#xff0c;却因为它的体积而束手无策&#xff1f;别担心&#xff0c;今天我将为大家分享一些简单实用的 PDF 压缩技巧&#xff0c;让你的文件轻松压缩pdf。 打开“轻云处理pdf官网”&#xff0c; 的网站。然后上…

安徽理工大学2计算机考研情况,招收计算机专业的学院和联培都不少!

安徽理工大学&#xff08;Anhui University of Science and Technology&#xff09;&#xff0c;位于淮南市&#xff0c;是安徽省和应急管理部共建高校&#xff0c;安徽省高等教育振兴计划“地方特色高水平大学”建设高校&#xff0c;安徽省高峰学科建设计划特别支持高校&#…

海外注册 | 一分钟看懂英国医疗器械注册

英国医疗器械市场因其独特的地域划分而与其他国家有所不同。分为大不列颠市场&#xff08;包括&#xff1a;英格兰、苏格兰和威尔士&#xff09;和北爱尔兰市场&#xff0c;它们在法规要求上存在细微差别。 以下是针对这两个市场的基本要求概览&#xff1a; 监管机构&#xf…