python之前端css样式(一)

css

ID选择器

#c1{color:red;#边框为红色border:1px solid red;
}
<div id="c2">中国移动</div>

类选择器

.xx{color:blue;
}
<div class="xx">中国联通</div>

标签选择器

li{color: pink;
}
<ul><li>北京</li><li>上海</li><li>山东</li></ul>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>
​.xx{color: dodgerblue;}
​#c2{color: aqua;}li{color: pink;}</style>
</head><div class="xx">中国联通</div><div id="c2">中国移动</div><ul><li>北京</li><li>上海</li><li>山东</li></ul>
</body>
</html>

image-20240109172452082

属性选择器

 .v1[xx="123"]{color: blueviolet;}
<div class="v1" xx="123">hellow world</div>
<div class="v1" xx="456">hellow world</div>
<div class="v1" xx="789">hellow world</div>

后代选择器

li{color: pink;
}
<ul><li>北京</li><li>上海</li><li>山东</li></ul>
#此时只有class="yy"的标签会变色,上面的不变
.yy li{color: pink;
}
<ul><li>北京</li><li>上海</li><li>山东</li></ul>
<ul class="yy"><li>北京</li><li>上海</li><li>山东</li></ul>
#只找儿子
.zz>a{color: aqua;
}
<div class="zz"><a>meli</a><div><a>hellw</a></div>
</div>
#找所有的后代
.zz a{color: aqua;
}
<div class="zz"><a>meli</a><div><a>hellw</a></div>
</div>
.xx{color: dodgerblue;
}
.v1{color: blueviolet;
font-size: 280px;
​
<div class="xx v1">中国联通</div>
先满足属性xx,再满足v1,重复时满足最下面的
若不想覆盖,在第一个后面加!important;
.xx{color: red !important;
}

文字水平居中

.x{line-height:100px;
}

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

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

相关文章

CSS动画属性(一)加两实例

keyframes 定义 使用可以创建动画&#xff08;逐步改变从一个CSS样式设定到另一个。)可以设置多次变化发生时使用%/关键字from和to 0&#xff05;是开头动画&#xff0c;100&#xff05;是当动画完成。 为了获得最佳的浏览器支持&#xff0c;始终定义为0&#xff05;和100&…

数据分析 | NumPy

NumPy&#xff0c;全称是 Numerical Python&#xff0c;它是目前 Python 数值计算中最重要的基础模块。NumPy 是针对多维数组的一个科学计算模块&#xff0c;这个模块封装了很多数组类型的常用操作。 使用numpy来创建数组 import numpy as npdata np.array([1, 2, 3]) print…

网络学习:邻居发现协议NDP

目录 前言&#xff1a; 一、报文内容 二、地址解析----NS/NA 目标的被请求组播IP地址 邻居不可达性检测&#xff1a; 重复地址检测 路由器发现 地址自动配置 默认路由器优先级和路由信息发现 重定向 前言&#xff1a; 邻居发现协议NDP&#xff08;Neighbor Discovery…

Linux mount命令教程:如何挂载和管理文件系统(附实例详解和注意事项)

Linux mount命令介绍 mount命令用于将设备上找到的文件系统挂载到以/为根的大树结构&#xff08;Linux文件系统&#xff09;。相反&#xff0c;另一个命令umount可以用来将这些设备从树中分离。 Linux mount命令适用的Linux版本 mount命令在所有主流的Linux发行版中都是可用…

【晴问算法】入门篇—贪心算法—区间不相交问题

题目描述 给定n个开区间&#xff0c;从中选择尽可能多的开区间&#xff0c;使得这些开区间两两没有交集。 输入描述 输出描述 输出一个整数&#xff0c;表示最多选择的开区间个数。 样例1输入 4 1 3 2 4 3 5 6 7 输出 3 解释 最多选择(1,3)、(3,5)、(6,7)三个区间&#xff0c;它…

CSS中水平垂直居中的实现

利用绝对定位&#xff0c;先将元素的左上角通过top:50%和left:50%定位到页面的中心&#xff0c;然后再通过translate来调整元素的中心点到页面的中心。该方法需要考虑浏览器兼容问题。 .parent { position: relative; } .child { position: absolute; left: 50%; …

SAP前台处理:销售业务集成<VA03/VL03N/VLPOD/VF03) 01/02

一、背景&#xff1a; 从销售订单创建VA01>发货过账VL01N >POD确认>VF01开票 这个流程涉及的凭证流及各个节点如何查询上游下游凭证&#xff1b; 二、凭证流&#xff1a; 从销售订单查看销售凭证流 VA03 双击交货单&#xff1a;带出交货单对应行项目及分批次项目…

SpringBoot(文件上传功能,阿里云OSS存储,几种配置文件用法)【详解】

目录 一、新增员工 二、文件上传-技术点 1. 文件上传功能 1.客户端上传文件三要素 2 服务端接收文件 Controller接收文件示例 修改允许上传的文件大小 2. 本地存储文件 3. 阿里云OSS存储&#xff08;这里只写一种&#xff0c;可以用其它的&#xff09; 1.介绍 2.开通…

c# .net6 Task 多线程介绍

c# .net6 Task 多线程介绍 一、Task 启动方式 1. new Task() 直接new Task对象&#xff0c;传入Action委托&#xff0c;该方法不具有参数且不返回值&#xff0c;然后调用Start()即可。 Task task new Task(() >{Console.WriteLine($"01:这里开启了一个线程&#xf…

24计算机考研调剂 | 武汉科技大学

武汉科技大学冶金新技术与功能金属材料研究梯队招收研究生 考研调剂招生信息 学校:武汉科技大学 专业: 工学->治金工程 工学->材料科学与工程 工学->计算机科学与技术 工学->动力工程及工程热物理 工学->机械工程 年级:2024 招生人数:20 招生状态:正在招…

【前端】CSS常见的选择器

CSS&#xff08;层叠样式表&#xff09;提供了多种选择器&#xff0c;用于选择要应用样式的 HTML 元素。在CSS中选择器是一种模式&#xff0c;用于匹配HTML文档中的某些元素并且应用到这些元素上。我们可以通过选择器给特定的元素设置样式。 常见的 CSS 选择器 元素选择器&am…

try~catch语句

用try~catch语句来处理异常&#xff0c;将可能出现的异常操作放在 try部分&#xff0c;将发生异常后的处理放在catch部分。 带finally子语句的try~catch 语法格式 执行机制 ★注意★&#xff1a; try~catch中执行了return → finally子语句仍被执行&#xff1b; try~catch中执…

VScode(8)之阅读大型CC++工程

VScode(8)之阅读大型CC工程(Linux内核)代码 Author&#xff1a;Once Day Date&#xff1a;2023年4月25日/2024年3月17日 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章请查看专栏: VScode开发_Once-Day的博客-CSDN博客 参考文档: 1. 历史包袱 由于上世纪70-80年代的…

【亲测可行】Mac上clion boost库的安装与使用

很多博客上关于boost库的安装与使用都有问题&#xff0c;所以自己写一篇文章来纠正一些错误 这里采用homebrew安装 brew install boost安装好以后boost目录在 /opt/homebrew/Cellar/boost/xxx版本 下&#xff0c;然后可以看到lib&#xff08;库文件&#xff09;和include&…

语音神经科学—04.Speech Computations of the Human Superior Temporal Gyrus

Speech Computations of the Human Superior Temporal Gyrus&#xff08;人类颞上沟的言语计算&#xff09; 专业术语 Superior Temporal Gyrus 颞上沟 phoneme 音素 syllable 音节 speech perception 语音感知 vocal tract 声道 acoustic 声学的 articulatory 发音的 spectro…

【基于Seeed xiao ESP32S3 Sense的自动化HA鱼缸设计】

1.前言 基于Seeed xiao ESP32S3 Sense的自动化HA鱼缸 在当今物联网与智能家居科技日益发达的时代&#xff0c;将先进技术和传统养鱼艺术融合&#xff0c;创造出智能、自动化且极具观赏价值的鱼缸已成为一种创新趋势。SeeedStudio推出的Xiao ESP32-S3 Sense开发板以其卓越的性能…

command failed: npm install --loglevel error --legacy-peer-deps

在使用vue create xxx创建vue3项目的时候报错。 解决方法&#xff0c;之前使用的https://registry.npm.taobao.org 证书过期更换镜像地址即可 操作如下&#xff1a; 1.cd &#xff5e;2.执行rm .npmrc3. sudo npm install -g cnpm --registryhttp://registry.npmmirror.com…

建立人才信息化管理体系,提高企业核心竞争力

很多企业在发展中&#xff0c;都引入了信息化工具系统来提升管理效率。在人力资源管理方面&#xff0c;也有不少信息化系统。通过大量调研发现&#xff0c;在人才管理的初级阶段&#xff0c;企业通过对员工数量统计、员工结构统计、入离职、人才梯队数据、招聘管理数据、培训管…

基于高斯模型的运动目标检测(车辆检测),Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

Vue3:标签的ref属性用法

一、情景说明 我们在写前端页面的时候&#xff0c;肯定会遇到获取DOM内容的情况。 以往&#xff0c;我们是用原生的js方法去获取&#xff0c;如document.getXxxx 但是&#xff0c;这中方法会有个问题&#xff0c;如果父组件和子组件的id相同&#xff0c;则会出错。 在Vue3中&…