当前位置: 首页 > news >正文

选择器的使用

目录

  • 层级选择器
  • 属性选择器
  • 伪类选择器
    • 结构伪类选择器
    • 目标伪类选择器

层级选择器

/*子代选择器:选出box下的所有li标签*/.box>li{background-color: aliceblue;}/* 选出box后面的第一个兄弟li标签 */.box+li{background-color: aliceblue;}/* 选出box后面的所有兄弟li标签 */.box~li{background-color: aliceblue;}

属性选择器

/* 属性选择器:选出所有带有class属性的标签 class也可以为其他属性 */[class]{background-color: aliceblue;}/* 属性选择器:选出所有带有class属性的div标签 class也可以为其他属性 */div[class]{background-color: aliceblue;}/* 属性选择器:选出所有带有class=box1属性的div标签 class也可以为其他属性 */div[class=box1]{background-color: aliceblue;}/* 属性选择器:选出所有class属性以b开头的div标签 class也可以为其他属性 */div[class^=b]{background-color: aliceblue;}/* 属性选择器:选出所有class属性以b结尾的div标签 class也可以为其他属性 */div[class$=b]{background-color: aliceblue;}/* 属性选择器:选出所有class属性包含b的div标签 class也可以为其他属性 */div[class*=b]{background-color: aliceblue;}/* 属性选择器:选出所有带有class属性中包含box1的div标签 class也可以为其他属性 */div[class~=box1]{background-color: aliceblue;}

伪类选择器

结构伪类选择器

/* 结构伪类选择器 *//* 选择box下的最后一个div标签 */.box div:last-child{background-color: aliceblue;}/* 找到第一个li标签 */li:first-child{background-color: aliceblue;}/* 找到最后一个li标签 */li:last-child{background-color: aliceblue;}/* 找到第二个li标签 */li:nth-child(2){background-color: aliceblue;}/* 找到第偶数个li标签,2n可以用even代替 */li:nth-child(2n){background-color: aliceblue;}/* 找到第奇数个li标签,2n-1可以用odd代替 */li:nth-child(2n-1){background-color: aliceblue;}

目标伪类选择器

/* 目标伪类选择器:隐藏锚点的导向位置 */
div.content{display: none;
}
div.content:target{display: block;
}

相关文章:

选择器的使用

目录 层级选择器属性选择器伪类选择器结构伪类选择器目标伪类选择器 层级选择器 /*子代选择器:选出box下的所有li标签*/.box>li{background-color: aliceblue;}/* 选出box后面的第一个兄弟li标签 */.boxli{background-color: aliceblue;}/* 选出box后面的所有兄…...

软考A计划-系统集成项目管理工程师-项目干系人管理-上

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 👉关于作者 专注于Android/Unity和各种游…...

F5 LTM 知识点和实验 2-负载均衡基础概念

第二章:负载均衡基础概念 目标: 使用网页和TMSH配置virtual servers,pools,monitors,profiles和persistence等。查看统计信息 基础概念: Node一个IP地址。是创建pool池的基础。可以手工创建也可以自动创…...

安全学习DAY08_算法加密

算法加密 漏洞分析、漏洞勘测、漏洞探针、挖漏洞时要用到的技术知识 存储密码加密-应用对象传输加密编码-发送回显数据传输格式-统一格式代码特性混淆-开发语言 传输数据 – 加密型&编码型 安全测试时,通常会进行数据的修改增加提交测试 数据在传输的时候进行…...

OpenCloudOS 与PolarDB全面适配

近日,OpenCloudOS 开源社区签署阿里巴巴开源 CLA (Contribution License Agreement, 贡献许可协议), 正式与阿里云 PolarDB 开源数据库社区牵手,并展开 OpenCloudOS (V8)与阿里云开源云原生数据库 PolarDB 分布式版、开源云原生数…...

如何在Linux系统中使用yum命令安装MySQL

1、安装软件 # yum install -y https://repo.mysql.com//mysql80-community-release-el7-8.noarch.rpm # yum -y install mysql-community-server网址来源:https://dev.mysql.com/downloads/repo/yum/ 2、启动软件 # systemctl enable mysqld# systemctl start my…...

在Ail Linux中手动配置IPv6

第一步,登录阿里云服务器控制台,在“概览”页面找到对应实例,然后单击实例ID。 第二步,在“实例详情”页面中的“网络信息”栏目中,可以发现“IPv6 地址”中没有数据,然后单击“专有网络”的专有网络ID。 第…...

TCP如何保证服务的可靠性

TCP如何保证服务的可靠性 确认应答超时重传流量控制滑动窗口机制概述发送窗口和接收窗口的工作原理几种滑动窗口协议1比特滑动窗口协议(停等协议)后退n协议选择重传协议 采用滑动窗口的问题(死锁可能,糊涂窗口综合征)死…...

【云原生系列】openstack搭建过程及使用

目录 搭建步骤 准备工作 正式部署OpenStack 安装的过程 安装组件如下 登录页面 进入首页 创建实例步骤 上传镜像 配置网络 服务器配置 dashboard配置 密钥配置免密登录 创建实例 绑定浮动ip 免密登录实例 搭建步骤 准备工作 1.关闭防火墙和网关 systemctl dis…...

无涯教程-jQuery - Menu组件函数

小部件菜单功能可与JqueryUI中的小部件一起使用。一个简单的菜单显示项目列表。 Menu - 语法 $( "#menu" ).menu(); Menu - 示例 以下是显示菜单用法的简单示例- <!doctype html> <html lang"en"><head><meta charset"utf-…...

Django用户登录验证和自定义验证类

一、FBV 用户登录验证 1.1 登录验证并加入 session 用户登录时&#xff0c;使用 authenticate 验证用户名和密码是否正确&#xff0c;正确则返回一个用户对象。 用户名默认的字段名是 username 密码默认的字段名是 password 将已验证的用户添加到当前会话(session)中&#x…...

json-server详解

零、文章目录 json-server详解 1、简介 Json-server 是一个零代码快速搭建本地 RESTful API 的工具。它使用 JSON 文件作为数据源&#xff0c;并提供了一组简单的路由和端点&#xff0c;可以模拟后端服务器的行为。github地址&#xff1a;https://github.com/typicode/json-…...

MacOS Monterey VM Install ESXi to 7 U2

一、MacOS Monterey ISO 准备 1.1 下载macOS Monterey 下载&#x1f517;链接 一定是 ISO 格式的&#xff0c;其他格式不适用&#xff1a; https://www.mediafire.com/file/4fcx0aeoehmbnmp/macOSMontereybyTechrechard.com.iso/file 1.2 将 Monterey ISO 文件上传到数据…...

哈工大计算机网络课程网络安全基本原理详解之:消息完整性与数字签名

哈工大计算机网络课程网络安全基本原理详解之&#xff1a;消息完整性与数字签名 这一小节&#xff0c;我们继续介绍网络完全中的另一个重要内容&#xff0c;就是消息完整性&#xff0c;也为后面的数字签名打下基础。 报文完整性 首先来看一下什么是报文完整性。 报文完整性…...

K8s:K8s 20个常用命令汇总

写在前面 博文内容为节译整理&#xff0c;用于温习理解不足小伙伴帮忙指正 对每个人而言&#xff0c;真正的职责只有一个&#xff1a;找到自我。然后在心中坚守其一生&#xff0c;全心全意&#xff0c;永不停息。所有其它的路都是不完整的&#xff0c;是人的逃避方式&#xff0…...

DHCP防护原理

电脑刚连接到网络 是没有IP地址的 。 通过发送广播到DHCPO服务器。 DHCP服务器响应对应的 IP地址&#xff08;简要过程&#xff09;。 如果有人私自挂接WIFI&#xff0c;相当于DHCP服务器&#xff0c;但这个DHCP服务器是假的&#xff0c;就会引起电脑接入获取家用WIFI的地址&…...

leetcode2434. 使用机器人打印字典序最小的字符串 出栈顺序 贪心+栈

https://leetcode.cn/problems/using-a-robot-to-print-the-lexicographically-smallest-string/ 给你一个字符串 s 和一个机器人&#xff0c;机器人当前有一个空字符串 t 。执行以下操作之一&#xff0c;直到 s 和 t 都变成空字符串。请你返回纸上能写出的字典序最小的…...

【程序设计】一文讲解程序设计目标:高内聚,低耦合

前言 软件设计的目标是高内聚、低耦合。 如果代码是高耦合和低内聚的&#xff0c;就会出现修改一个逻辑&#xff0c;会导致多处代码要修改&#xff0c;可能影响到多个业务链路&#xff0c;这增加了出bug的业务风险&#xff0c;同时增加了测试回归的范围&#xff0c;导致研发成…...

nginx mirror代码分析

实现方式 mirror逻辑的工作阶段&#xff1a; ngx在log phase之后&#xff08;在ngx_http_free_request处调用&#xff09;已完成向client端返回response&#xff0c;在log phase之后完成close connection&#xff08;短链接&#xff09;&#xff0c;在该阶段处理mirror逻辑不…...

Python代理模式介绍、使用

一、Python代理模式介绍 Python代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式。在代理模式中&#xff0c;代理对象充当了另一个对象的占位符&#xff0c;以控制对该对象的访问。 代理对象和被代理对象实现了相同的接口&#xff0c;因此它们可以互相替代…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...