CSS新手入门笔记整理:CSS3选择器

属性选择器

属性选择器,指的是通过“元素的属性”来选择元素的一种方式。

语法

元素[attr^="xxx"]{}
元素[attr$="xxx"]{}
元素[attr*="xxx"]{}

选择器

说明

E[attr^="xxx"]

选择元素E,其中E元素的attr属性是以xxX开头的任何字符

E[attr$="xxx”]

选择元素E,其中E元素的attr属性是以xxX结尾的任何字符

E[attr*="xxx"]

选择元素E,其中E元素的attr属性是包含xXX的任何字符


子元素伪类选择器

子元素伪类选择器,指的就是选择某一个元素下的子元素。

第一类

选择器

说明

E:first-child

选择父元素下的第一个子元素(该子元素类型为E,以下类同)

E:last-child

选择父元素下的最后一个子元素

E:nth-child(n)

选择父元素下的第n个子元素或奇偶元素,n取值有3种:数字、odd(奇数列)和even(偶数列),其中n从1开始。

E:only-child

选择父元素下唯一的子元素,该父元素只有一个子元素

语法

父元素 E:first-child{}
父元素 E:last-child{}
父元素 E:nth-child(n){}
父元素 E:only-child{}

第二类

选择器

说明

E:first-of-type

选择父元素下的第一个E类型的子元素

E:last-of-type

选择父元素下的最后一个E类型的子元素

E:nth-of-type(n)

选择父元素下的第n个E类型的子元素或奇偶元素,n取值有3种数字、odd(奇数列)和even(偶数列),n从1开始

E:only-of-type

选择父元素下唯一的E类型的子元素,该父元素可以有多个子元素

语法

父元素 E:first-of-type{}
父元素 E:last-of-type{}
父元素 E:nth-of-type(n){}
父元素 only-of-type{}

区别

:first-child在选择父元素下的子元素时,不仅要区分元素类型,还要求是第一个子元素。而:first-of-type在选择父元素下的子元素时,只需要区分元素类型,不要求是第一个子元素。


UI伪类选择器

  • UI伪类选择器,指的是针对“元素的状态”来选择元素的一种伪类选择器。UI,全称“User Interface”,用户界面。
  • 元素的状态包括:可用、不可用、选中、未选中、获取焦点、失去焦点等。
  • UI伪类选择器特点是:对于指定的样式,在默认状态下不起作用,只有当元素处于某种状态时才起作用。
  • 大多数UI伪类选择器都是针对表单元素的。

选择器

说明

:focus

定义元素获取焦点时使用的样式。

::selection

定义页面中被选中文本的样式。

:checked

定义页面中被选中文本的样式。

:enabled

定义表单元素“可用”时的样式

:disabled

定义表单元素“禁用”时的样式

:read-write

定义表单元素“可读写”时的样式

:read-only

定义表单元素“只读”时的样式

语法

表单元素 :focus{}
表单元素 ::selection{}
表单元素 :checked{}
表单元素 :enabled{}
表单元素 :disabled{}
表单元素 :read-write{}
表单元素 :read-only{}

其他伪类选择器

选择器

说明

:root

选择HTML页面的根元素<html></html>。

:empty

选择一个“不包含任何子元素和内容”的元素即空元素。

:target

选取页面中的某一个target元素。target元素指的是id被当成页面的锚点链接来使用的元素。

:not()

选取某一个元素之外的所有元素。

语法

:root{}
:empty{}
:target{}
:not(){}

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

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

相关文章

new一个对象

1.自己直接调用 function Person(name, age) {this.name name;this.age age;}let a1 new Person("小明", 20);let a2 new Person("小菜", 25);console.log(a1); 打印的对象: 2.自己模拟一个 function Person(name, age) {this.name name;this.age a…

[Linux] LVS负载均衡群集——DR模式

一、 DR模式的特点 直接路由&#xff1a; 在LVS_DR模式下&#xff0c;负载均衡器不修改数据包的IP地址&#xff0c;只修改目的MAC地址。这使得数据包可以直接路由到后端实际服务器上&#xff0c;而不需要返回到负载均衡器。 高性能&#xff1a; 由于数据包在传输过程中不需要回…

本地运行大语言模型并可视化(Ollama+big-AGI方案)

目前有两种方案支持本地部署&#xff0c;两种方案都是基于llamacpp。其中 Ollama 目前只支持 Mac&#xff0c;LM Studio目前支持 Mac 和 Windows。 LM Studio&#xff1a;https://lmstudio.ai/ Ollama&#xff1a;https://ollama.ai/download 本文以 Ollama 为例 step1 首先下…

唯一分解定理

唯一分解定理 1.内容 任何一个大于1的整数n都可以分解成若干个质数的连乘积&#xff0c;如果不计各个质数的顺序&#xff0c;那么这种分解是惟一的&#xff0c;即若n>1&#xff0c;则有 n ∏ p i j n\prod{p^j_i} n∏pij​这里的 p i p_i pi​是质数。 可以进行简单证明…

STM32_启动流程详解

目录标题 前言 启动流程概述复位中断函数详解SystemInit函数详解 __main函数详解 附录 stm32单片机的存储器映像中断向量表的映射 前言 最近在学习IAP远程OTA升级单片机固件程序&#xff0c;发现自己对单片机的启动流程还不是那么了解&#xff0c;就总结整理一下吧。 启动流程…

QT实现四则运算计算器

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);this->setMaximumSize(240,300);this->setMinimumSize(240,300);this->setWindowTitle("计算器&…

node.js mongoose简述

目录 官方文档 mongoose Schema Model Query document 关系 官方文档 Mongoose v8.0.3: Getting Started mongoose Mongoose 是一个 Node.js 环境下 MongoDB 的对象建模工具。它提供了一种在应用程序中与 MongoDB 数据库进行交互的方式&#xff0c;使得开发者能够使用…

NoSQL 数据库有哪些典型应用?

前面的内容介绍了数据库读写分离和分库分表相关知识&#xff0c;都是针对关系型数据库的&#xff0c;即通常说的 RDBMS。除了关系型数据库&#xff0c;NoSQL 在项目开发中也有着越来越重要的作用&#xff0c;与此同时&#xff0c;NoSQL 相关的内容也是面试的常客。今天我们一起…

计算机网络技术的应用探讨

一、计算机网络技术的概念与主要功能 计算机网络技术指的是将计算机与传输介质连接在 一起&#xff0c;并根据规定的网络协议进行数据通信&#xff0c;从而实现 数据资源共享的一种技术。计算机网络技术的主要功能 包括以下三点。第一&#xff0c;计算机网络技术具有通信功能&a…

如何进行软件测试和测试驱动开发(TDD)?

1. 软件测试概述 1.1 什么是软件测试&#xff1f; 软件测试是一种评估系统的过程&#xff0c;目的是发现潜在的错误或缺陷。通过对软件进行测试&#xff0c;开发者和测试人员可以确定软件是否符合预期的需求、功能是否正常运行&#xff0c;以及系统是否足够稳定和可靠。 1.2…

函数难题:排列

给定一个整数 n&#xff0c;将数字 1∼n 排成一排&#xff0c;将会有很多种排列方法。 现在&#xff0c;请你按照字典序将所有的排列方法输出。 输入格式 共一行&#xff0c;包含一个整数 n。 输出格式 按字典序输出所有排列方案&#xff0c;每个方案占一行。 数据范围 …

【Linux】驱动

驱动 驱动程序过程 系统调用 用户空间 内核空间 添加驱动和调用驱动 驱动程序是如何调用设备硬件 驱动 在计算机领域&#xff0c;驱动&#xff08;Driver&#xff09;是一种软件&#xff0c;它充当硬件设备与操作系统之间的桥梁&#xff0c;允许它们进行通信和协同工作。驱动程…

[已解决】uniapp内置插件,editor富文本报错(附quill.min.js、image-resize.min.js文件)

在使用uni-app运行内置插件editor时&#xff0c;无法输入内容&#xff0c;控制台报错 原因&#xff1a;查看官网得知&#xff0c;需动态引入quill.min.js、image-resize.min.js文件 解决方法&#xff1a; 1.下载quill.min.js、image-resize.min.js到项目static/eidtor文件中 链…

云原生之深入解析Kubernetes Operator的最佳实践和最常见的问题分析

一、Kubernetes Operator 简介 Kubernetes Operator 是通过连接主 API 并 watch 时间的一组进程&#xff0c;一般会 watch 有限的资源类型。当相关 watch 的 event 触发的时候&#xff0c;operator 做出响应并执行具体的动作。这可能仅限于与主 API 交互&#xff0c;但通常会涉…

从零开始搭建Go语言开发环境

https://www.liwenzhou.com/posts/Go/install_go_dev/ “go 命令现在默认在模块感知模式下构建包&#xff0c;即使没有 go.mod 存在也是如此。 “您可以将 GO111MODULE 设置为 auto&#xff0c;仅当当前目录或任何父目录中存在 go.mod 文件时&#xff0c;才能启用模块感知模式…

Linux下FFmepg使用

1.命令行录一段wav,PCM数据 ffmpeg -f alsa -i hw:0,0 xxx.wav//录制 ffplay out.wav//播放ffmpeg -f alsa -i hw:0,0 -ar 16000 -channels 1 -f s16le 1.pcm ffplay -ar 16000 -channels 1 -f s16le 1.pcm -ar freq 设置音频采样率 -ac channels 设置通道 缺省为1 2.将pcm…

uniapp组件map地图组件使用

在uniapp中&#xff0c;可以使用uni-app官方提供的map组件来实现地图功能。下面是一个简单的使用示例&#xff1a; 在页面中引入map组件&#xff0c;在template中添加以下代码&#xff1a; <template><view><!-- map组件 --><map :longitude"longi…

03 动态渲染数据

概述 One of the most used terms and reactive elements used when constructing Vue components is data properties. These manifest themselves within the data() function of a Vue instance: 数据属性是构建 Vue 组件时最常用的术语和反应式元素之一。这些属性体现在 …

Kubernetes实战(十四)-k8s高可用集群扩容master节点

1 单master集群和多master节点集群方案 1.1 单Master集群 k8s 集群是由一组运行 k8s 的节点组成的&#xff0c;节点可以是物理机、虚拟机或者云服务器。k8s 集群中的节点分为两种角色&#xff1a;master 和 node。 master 节点&#xff1a;master 节点负责控制和管理整个集群…

PyTorch官网demo解读——第一个神经网络(1)

神经网络如此神奇&#xff0c;feel the magic 今天分享一下学习PyTorch官网demo的心得&#xff0c;原来实现一个神经网络可以如此简单/简洁/高效&#xff0c;同时也感慨PyTorch如此强大。 这个demo的目的是训练一个识别手写数字的模型&#xff01; 先上源码&#xff1a; fr…