更多的选择器 更多伪类选择器 颜色选中时写法 被选中的第一行文字 选中第几个元素

news2025/1/10 3:45:07

目录

  • 更多的选择器
    • 更多伪类选择器
    • 1. first-child
    • 2. last-child
    • 3. nth-child
    • 4. nth-of-type
    • 更多的伪元素选择器
    • 1. first-letter
    • 2. first-line
    • 3. selection

更多的选择器

更多伪类选择器

1. first-child

选择第一个子元素
圈住的地方意思是:li 的第一个子元素设置为红色。
在这里插入图片描述
first-of-type,选中子元素中第一个指定类型的元素
在这里插入图片描述

2. last-child

   必须是a元素,必须是最后一个子元素
 **加粗样式**       a:last-child{
            color: aqua;
        }

last-of-type

     选中的是子元素中的第一个a元素 
        a:last-of-type{
            color:blue;
        }

3. nth-child

  • 选中指定的第几个子元素
 a:nth-child(5){
            color: yellow;
        }

如果a元素前面有p标签的内容,那么选中的是第四个a元素,因为要从p标签开始数。

  • even:关键字,效果等同于2n
  a:nth-child(even){
            color: bisque;
        }
  • odd: 关键字,等同于2n+1

4. nth-of-type

选中指定的子元素中第几个某类型的元素

就像下图会忽视p元素,单看a元素的排列。
在这里插入图片描述

更多的伪元素选择器

1. first-letter

选中元素中的第一个字母
在这里插入图片描述

2. first-line

选中元素中第一行的文字
在这里插入图片描述

3. selection

选中被用户框选的文字
在这里插入图片描述

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

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

相关文章

第三篇:Haploview做单倍型教程3--结果解读

大家好,我是邓飞,这里介绍一下如何使用Haploview进行单倍型的分析。 计划分为三篇文章: 第一篇:Haploview做单倍型教程1–软件安装第二篇:Haploview做单倍型教程2–分析教程第三篇:Haploview做单倍型教程…

java中对泛型的理解

那么什么是泛型泛型:是一种把明确类型的工作推迟到创建对象或者调用方法的时候才去明确的特殊的类型。也就是说在泛型使用过程中,操作的数据类型被指定为一个参数,而这种参数类型可以用在类、方法和接口中,分别被称为泛型类、泛型…

【ROS2 入门】ROS2 创建工作空间

大家好,我是虎哥,从今天开始,我将花一段时间,开始将自己从ROS1切换到ROS2,在上几篇中,我们一起了解ROS 2中很多基础概念,从今天开始我们逐步就开始利用ROS2的特性进行开发编程了。 工作区&#…

【Linux】基础IO --- 系统级文件接口、文件描述符表、文件控制块、fd分配规则、重定向…

能一个人走的路别抱有任何期待,死不了 文章目录一、关于文件的重新认识二、语言和系统级的文件操作(语言和系统的联系)1.C语言文件操作接口(语言级别)1.1 文件的打开方式1.2 文件操作的相关函数1.3 细节问题2.系统级文…

【Go基础】加密算法和数据结构

文章目录一、加密算法1. 对称加密2. 非对称加密3. 哈希算法二、数据结构与算法1. 链表2. 栈3. 堆4. Trie树一、加密算法 1. 对称加密 加密过程的每一步都是可逆的 加密和解密用的是同一组密钥 异或是最简单的对称加密算法 // XOR 异或运算,要求plain和key的长度相…

PHP实现URL长连接转短连接方法总结

依据第二种算法,URL长连接转短连接实现方法如下:语言:PHP5.6服务器环境:LNMP假设:长连接地址:http://www.test.com/index.php短连接地址:http://t.test.com/六位code码第一步:利用sh…

Jupyter使用详解

Jupyter使用详解 本篇文章我们主要介绍Jupyter的使用与配置,本篇文章的主要内容如下: 什么是Jupyter notebookJupyter notebook的安装使用Jupyter notebook 什么是Jupyter notebook? Jupyter Notebook是一个Web应用程序,允许您…

在甲骨文云容器实例(Container Instances)上部署Oracle Linux 8 Desktop加强版(包括Minio,ssh登录等)

甲骨文云推出了容器实例,这是一项无服务器计算服务,可以即时运行容器,而无需管理任何服务器。 今天我们尝试一下通过容器实例部署Oracle Linux 8 Desktop加强版。 加强版里包括,Minio,ssh登录,OCI CLI命令行…

linux基本功系列之-rpm命令实战

文章目录前言🚀🚀🚀一. rpm命令介绍1.1 RPM包介绍1.2 rpm包的优缺点1.3 rpm包获取方式二. 语法格式及常用选项2.1 RPM安装常用参数2.2 rpm格式介绍三. 应用案例3.1 从本地安装软件包3.2 查询lrzsz的包有没有安装3.3 查询命令是哪个包安装的3.…

3.1(完结)Linux扫盲笔记

1. Linux环境下,输入密码,不回回显(*)。 2.普通用户的密码一定不要和root一样,root一定要安全级别更高。具体的添加账户和修改密码的操作,见蛋哥Linux训练营,第2课,30分钟处。 3.在最高权限(root)&#x…

java基础学习 day37 (集合)

集合与数组的区别 长度:数组长度固定,一旦创建完成,就不能改变。集合长度可变,根据添加和删除元素,自动扩容或自动收缩,(添加几个元素就扩容多少,删除几个元素就收缩多少&#xff0…

JMeter测试redis性能

JMeter测试redis性能前言插件使用说明前言 针对Redis的性能测试需求本身就比较小众,因为Redis的性能指标在官网已经给出了详细的数据。但是有时候我们仍然需要对redis进行性能测试,例如资源配置需求,参数调优对比,程序优化等场景…

树型结构——二叉数

之前就说过我们的数据结构分为两种,分别是线性结构和非线性结构,我们今天要学的第一种线性结构就是树型结构。 1. 树型结构 树型结构并非我们熟悉的重点,所以在这里只做了解。 概念: 树是一种非线性的数据结构,它是…

【人工智能原理自学】循环:序列依赖问题

😊你好,我是小航,一个正在变秃、变强的文艺倾年。 🔔本文讲解循环:序列依赖问题,一起卷起来叭! 目录一、“序列”二、代码实现一、“序列” 数据除了在空间上可能出现关联性外,也可…

nodejs在线教学网上授课系统vue367

目 录 摘 要 I Abstracts II 目 录 III 第1章 绪论 1 1.1课题背景 1 1.2研究意义 1 1.3研究内容 2 第2章 技术介绍 1 2.1 相关技术 1 1、 node_modules文件夹(有npn install产生) 这文件夹就是在创建完项目后,cd到项目目录执行np…

基于nodejs+vue驾校预约网站管理系统

系统分为用户和管理员,教练三个角色 目 录 第1章 绪论 1 1.1课题背景 1 1.2 背景意义 1 1.3 研究的内容 2 第2章 相关技术 3 第3章 系统分析 5 3.1可行性分析 5 3.2系统性能分析 6 3.3系统流程分析 6 3.3.1操作流程 6 3.3.2信息添加…

Cadence PCB仿真使用Allegro PCB SI生成电源地噪声报告SSN Report及报告导读图文教程

🏡《Cadence 开发合集目录》   🏡《Cadence PCB 仿真宝典目录》 目录 1,概述2,生成报告3,报告导读4,总结1,概述 SSN报告等效的电源和地噪声源报告。本文简单介绍使用Allegro PCB SI生成SSN报告的方法,及其要点导读。 2,生成报告 第1步,选择需要生成报告的网络,…

【绝密】大厂笔试题

👦个人主页:Weraphael ✍🏻作者简介:目前是C语言学习者 ✈️专栏:C语言刷题 🐋 希望大家多多支持,咱一起进步!😁 如果文章对你有帮助的话 欢迎 评论💬 点赞&…

微信支付账户更换实名认证微信钱包零钱余额还在吗?怎么更换微信钱包实名认证?

原文来源:https://www.caochai.com/article-4119.html 微信支付账户更换实名认证微信钱包零钱余额还在吗? 微信支付账户更换实名认证微信钱包的零钱余额将清空,因为更换微信钱包实名认证的前提条件是微信钱包零钱余额不能大于0元。所以&…

一周学习总结(2022.1.25)

文章目录前言本周任务完成情况1.《Vue.js的设计与实现》2.《计算机网络:自顶向下方法》3.组件库4.青训营笔记5.刷题总结前言 年前给自己定下了一组学习计划,安排了每天需要完成的事情。这里主要记录一下每周任务的完成情况。本周定制的任务主要围绕着《V…