#WEB前端(CCS选择器)

1.实验:CCS选择器


2.IDE:VSCODE 


3.记录: 

子代选择器、后代选择器、相邻兄弟选择器、类选择器、伪元素选择器(鼠标悬停)、ID选择器、调用选择器(全选)


4.代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<!-- 元素选择器 -->
<style>h1{color: darkgreen;}
</style>
<!-- 类选择器 -->
<style>.father{color: blue;}
</style>
<!-- 通用选择器 -->
<style>*{color: blueviolet;font-family: 'KaiTi';}
</style>
<!-- 子代选择器 -->
<style>.father_one > .son_one{color: aquamarine;}
</style>
<!-- 后代选择器 -->
<style>.father_one p{font-size: 40px;}
</style>
<!-- ID选择器 -->
<style>#header{color: chartreuse;}
</style>
<!-- 相邻元素选择器 -->
<style>h3 + p{background-color: chartreuse;}
</style>
<!-- 伪类选择器 -->
<style>#element:hover{background-color: coral;}
</style>
<body><h1>这是元素选择器</h1><p class="father">这是类选择器</p><p>这是第二段文字</p><p class="father">这是第一段文字的同辈</p><p>这是第三段文字</p><div class="father_one">这是父亲<p class="son_one">这是儿子<div><p>这是孙子</p></div></p></div><div id="header">这是一个ID选择器</div><p>这是一个普通的P标签</p><h3>这是一个相邻兄弟选择器示例</h3><p>这是另一个p标签</p><div id="element">这是一个伪类选择器示例</div>
</body>
</html>

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

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

相关文章

嵌入式学习 Day 29

函数: 1.函数的定义 2.函数的调用 3.函数的声明 1.函数传参: 1.赋值传递&#xff08;复制传递&#xff09; 函数体内部想要使用函数体外部变量值的时候使用复制传递 2.全局变量传递 3.地址传递 函数体内部想要修改函数体外部变量值的时候使用地址传递 函数…

W5300驱动说明

W5300是一款带有硬件协议栈的网络芯片&#xff0c;内部拥有128K的缓存&#xff0c;最大支持8路socket通信&#xff0c;与MCU之间通过16位数据总线通信&#xff0c;通信速度远超W5500之类以SPI作为通信接口的网络芯片&#xff0c;特别适合对高速网络传输有需求的应用。 本次使用…

使用 helm repo add istio添加了一个helm chart repo,如何查看istio的版本呢

1. 添加chart repo helm repo add istio https://istio-release.storage.googleapis.com/charts helm repo update2. 查看版本 helm search repo istio 3. 查看版本详细信息 helm show chart istio/cni 4. 查看某个chart的历史版本 helm search repo <chart-name> --…

【Linux】信号的保存

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 信号在Linux中的保存主要涉及方面 信号的类型&#xff1a; 信号处理程序&#xff1a; 信号的传递和处理&#xff1a; 信号的阻…

面试官:你用过Collections工具类吗?

Collections工具类 1. 常用的 Collections 方法2. 代码示例 Java中的 Collections 工具类提供了一系列静态方法&#xff0c;用于对集合进行各种操作&#xff0c;如排序、查找、替换等。下面我们来看一些 Collections 工具类中常用的API和使用示例。 1. 常用的 Collections 方…

回溯算法套路③排列型回溯+N皇后【基础算法精讲 16】

46 . 全排列 链接 : . - 力扣&#xff08;LeetCode&#xff09; 思路 : 那么怎么确定选了那个数呢? 这里设置一个used表示i选没选过 ; class Solution { public:vector<vector<int>> ans;vector<int> path;void backtrack(vector<int>nums,vect…

2024年【天津市安全员B证】考试内容及天津市安全员B证实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员B证考试内容根据新天津市安全员B证考试大纲要求&#xff0c;安全生产模拟考试一点通将天津市安全员B证模拟考试试题进行汇编&#xff0c;组成一套天津市安全员B证全真模拟考试试题&#xff0c;学员可通过…

《Improving Calibration for Long-Tailed Recognition》阅读笔记

论文标题 《Improving Calibration for Long-Tailed Recognition》 改进长尾识别的校准工作 作者 Zhisheng Zhong、 Jiequan Cui、Shu Liu 和 Jiaya Jia 香港中文大学和 SmartMore 初读 摘要 深度神经网络在训练数据集类别极度不平衡时可能会表现不佳。最近&#xff0c…

pydub、playsound播放声音;gradio、streamlit页面播放声音;gradio 页面图像、视频及调用摄像头

1、pydub from pydub import AudioSegment from pydub.playback import playsong AudioSegment.from_wav(r"C:\Users\loong\Downloads\zh.wav") play(song)2、playsound from playsound import playsoundplaysound(r"voice.wav")3、streamlit import s…

Linux学习:初识Linux

目录 1. 引子&#xff1a;1.1 简述&#xff1a;操作系统1.2 学习工具 2. Linux操作系统中的一些基础概念与指令2.1 简单指令2.2 ls指令与文件2.3 cd指令与目录2.4 文件目录的新建与删除指令2.5 补充指令1&#xff1a;2.6 文件编辑与拷贝剪切2.7 文件的查看2.8 时间相关指令2.9 …

22.基于springboot + vue实现的前后端分离-汽车票网上预定系统(项目 + 论文PPT)

项目介绍 系统是一个B/S模式系统&#xff0c;采用Spring Boot框架&#xff0c;MySQL 数据库设计开发&#xff0c;充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得汽车票网上预订系统管理工作系统化、规范化。本系统的使用使管理人…

JavaScript作用域及预解析

文章目录 1. 作用域介绍2. 变量的作用域*3. JS中没有块级作用域4. 作用域链5. 预解析预解析案例 1. 作用域介绍 全局作用域局部作用域相同的变量名称在不同的作用域中是不会相互影响的&#xff01; 2. 变量的作用域 全局变量&#xff1a;在全局下都可以使用&#xff1b;局部变…

华为数通方向HCIP-DataCom H12-821题库(多选题:61-80)

第61题 ACL 可分为如下哪些类别? A.用户自定义 ACL B.基本 ACL C.二层ACL D.高级ACL 【参考答案】ABCD 【答案解析】 A. 用户自定义 ACL (User-defined ACL): 这是用户根据自身需求自定义的 ACL,用于实现特定的访问控制策略。B.基本 ACL (Standard ACL): 基本 ACL 是基于源 …

北京大学发布,将试错引入大模型代理学习!

引言&#xff1a;探索语言智能的新边界 在人工智能的发展历程中&#xff0c;语言智能始终是一个核心的研究领域。随着大语言模型&#xff08;LLM&#xff09;的兴起&#xff0c;我们对语言智能的理解和应用已经迈入了一个新的阶段。这些模型不仅能够理解和生成自然语言&#x…

【算法分析与设计】组合

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 题目 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 示例 1&…

【计算机学习】-- 电脑的组装和外设

系列文章目录 文章目录 系列文章目录前言一、电脑的组装1.CPU2.主板3.显卡4.硬盘5.内存6.散热器7.电源8.机箱 二、电脑外设选用1.显示器2.鼠标3.键盘4.音响 总结 前言 一、电脑的组装 1.CPU 返回目录 认识CPU CPU&#xff0c;即中央处理器&#xff0c;负责电脑资源的调度安…

计算机网络-网络安全(一)

1.网络安全威胁和漏洞类型&#xff1a; 窃听 假冒 重放 流量分析 破环完整 病毒 木马 诽谤 非授权访问 拒绝服务 漏洞&#xff1a;物理、软件、不兼容、其他等。 2.网络安全信息数据五大特征&#xff1a; 完整性&…

【.NET Core】深入理解IO - 读取器和编写器

【.NET Core】深入理解IO - 读取器和编写器 文章目录 【.NET Core】深入理解IO - 读取器和编写器一、概述二、BinaryReader和BinaryWriter2.1 BinartReader类2.2 BinaryWriter类 三、StreamReader和StreamWriter3.1 StreamReader类3.1 StreamWriter类StreamWriter类构造函数Str…

【Vue】探究 Vue 2 与 Vue 3 生命周期:变化与延续

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

paper-ai :搜索真实文献并生成引用真实文献的AI论文

paper-ai &#xff1a;搜索真实文献并生成引用真实文献的AI论文。 项目简介 使用真实文献最快速完成论文的方法 利用人工智能撰写论文 人工智能书写功能&#xff1a;点击 "AI 写作 "进行正常对话互动。人工智能将根据您的输入提供写作建议或回答问题。 寻找文献功能…