【CSS 选择器应用在QSS】第二天

news/2024/4/19 1:44:44

CSS 选择器应用在QSS

  • 【1】元素选择器(元素通用性)
  • 【2】id 选择器(唯一性)
    • 【2.1】CSS
    • 【2.2】QSS
  • 【3】类选择器
    • 【3.1】CSS
    • 【3.2】QSS
  • 【4】类选择器(只针对指定元素)
    • 【4.1】CSS
    • 【4.2】QSS
  • 【5】通用选择器
    • 【5.1】CSS
    • 【5.2】QSS
  • 【6】分组选择器
    • 【6.1】CSS
    • 【6.2】QSS


我们可以将 CSS 选择器分为五类:

1. 简单选择器(根据名称、id、类来选取元素)
2. 组合器选择器(根据它们之间的特定关系来选取元素)
3. 伪类选择器(根据特定状态选取元素)
4. 伪元素选择器(选取元素的一部分并设置其样式)
5. 属性选择器(根据属性或属性值来选取元素)

【1】元素选择器(元素通用性)

这部分请查看第一天(Qt专栏)
P段落的通用性

<!DOCTYPE html>
<html>
<head>
<style>
p {text-align: center;color: red;
} 
</style>
</head>
<body><p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是!</p>
<p>还有我!</p></body>
</html>

【2】id 选择器(唯一性)

p段落的唯一性
注意:id 名称不能以数字开头。

【2.1】CSS

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {text-align: center;color: red;
}
</style>
</head>
<body><p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p></body>
</html>

效果
在这里插入图片描述

【2.2】QSS

样式表

#textBrowser {text-align: center;color: red;
}

UI设计界面
在这里插入图片描述
Qt代码文本

ui->textBrowser->setReadOnly(true);QString html  = "<!DOCTYPE html>\<html>\<head>\<style>\#para1 {\text-align: center;\color: red;\}\</style>\</head>\<body>\\<p id='para1'>Hello World!</p>\<p>本段不受样式的影响。</p>\\</body>\</html>\";ui->textBrowser->setHtml(html);
ui->textBrowser->setText(html);
ui->textBrowser->append(html);

效果
在这里插入图片描述

【3】类选择器

类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。

【3.1】CSS

所有元素都可以使用这个选择器

<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center;color: red;
}
</style>
</head>
<body><h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p> </body>
</html>

效果
在这里插入图片描述

【3.2】QSS

样式表无法生效,不支持

Qt代码文本

QString html  = "<!DOCTYPE html>\<html>\<head>\<style>\.center {\text-align: center;\color: red;\}\</style>\</head>\<body>\\<h1 class='center'>居中的红色标题</h1>\<p class='center'>居中的红色段落。</p> \\</body>\</html>\";ui->textBrowser->setHtml(html);     //覆盖式设置(被第二条覆盖)ui->textBrowser->setText(html);      //覆盖式设置ui->textBrowser->append(html);      //追加式设置

效果
在这里插入图片描述

【4】类选择器(只针对指定元素)

【4.1】CSS

只有p元素可以使用这个选择器

<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center;color: red;
}
</style>
</head>
<body><h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落将是红色并居中对齐的。</p> </body>
</html>

效果
在这里插入图片描述

引用两个类的 HTML 元素,从前往后的优化级,相同的属性会被后面的替换

<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center;color: red;
}p.large {font-size: 300%;
}
</style>
</head>
<body><h1 class="center">这个标题不受影响</h1>
<p class="center">本段将是红色并居中对齐。</p>
<p class="center large">本段将是红色、居中对齐,并使用大字体。</p> </body>
</html>

【4.2】QSS

样式表无法生效,不支持

Qt代码文本1

QString html  = "<!DOCTYPE html>\<html>\<head>\<style>\p.center {\text-align: center;\color: red;\}\</style>\</head>\<body>\\<h1 class='center'>这个标题不受影响</h1>\<p class='center'>这个段落将是红色并居中对齐的。</p> \\</body>\</html>\";ui->textBrowser->setHtml(html);     //覆盖式设置(被第二条覆盖)ui->textBrowser->setText(html);      //覆盖式设置ui->textBrowser->append(html);      //追加式设置

效果1
在这里插入图片描述

Qt代码文本2

QString html  = "<!DOCTYPE html>\<html>\<head>\<style>\p.center {\text-align: center;\color: red;\}\p.large {\font-size: 50pt;\}\</style>\</head>\<body>\<h1 class='center'>这个标题不受影响</h1>\<p class='center'>本段将是红色并居中对齐。</p>\<p class='center large'>本段将是红色、居中对齐,并使用大字体。</p>\</body>\</html>\";ui->textBrowser->setHtml(html);     //覆盖式设置(被第二条覆盖)
ui->textBrowser->setText(html);     //覆盖式设置
ui->textBrowser->append(html);      //追加式设置

效果2
在这里插入图片描述


【5】通用选择器

【5.1】CSS

所有元素都可以使用这个选择器(*类比通配符)

<!DOCTYPE html>
<html>
<head>
<style>
* {text-align: center;color: blue;
}
</style>
</head>
<body><h1>Hello world!</h1><p>页面上的每个元素都会受到样式的影响。</p>
<p id="para1">我也是!</p>
<p>还有我!</p></body>
</html>

效果
在这里插入图片描述

【5.2】QSS

样式表,一般在容器里面设计,存放在容器里面的组件属于容器的子类
容器父类:
组件子类:
在这里插入图片描述

* {text-align: center;color: blue;
}

在这里插入图片描述

Qt代码文本

QString html  = "<!DOCTYPE html>\<html>\<head>\<style>\* {\text-align: center;\color: blue;\}\</style>\</head>\<body>\<h1>Hello world!</h1>\<p>页面上的每个元素都会受到样式的影响。</p>\<p id='para1'>我也是!</p>\<p>还有我!</p>\</body>\</html>\";ui->textBrowser->setHtml(html);     //覆盖式设置(被第二条覆盖)ui->textBrowser->setText(html);      //覆盖式设置ui->textBrowser->append(html);      //追加式设置

效果
在这里插入图片描述


【6】分组选择器

【6.1】CSS

为不同的元素设置相同的属性,用逗号分隔

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {text-align: center;color: red;
}
</style>
</head>
<body><h1>Hello World!</h1>
<h2>更小的标题</h2>
<p>这是一个段落。</p></body>
</html>

效果
在这里插入图片描述

【6.2】QSS

样式表,一般在容器里面设计,存放在容器里面的组件属于容器的子类
容器父类:
组件子类:
在这里插入图片描述

QWidget,QLabel,QTextBrowser {text-align: center;color: blue;border:2px solid red;
}

Qt代码文本

QString html  = "<!DOCTYPE html>\<html>\<head>\<style>\h1, h2, p {\text-align: center;\color: red;\}\</style>\</head>\<body>\\<h1>Hello World!</h1>\<h2>更小的标题</h2>\<p>这是一个段落。</p>\\</body>\</html>\";ui->textBrowser->setHtml(html);     //覆盖式设置(被第二条覆盖)ui->textBrowser->setText(html);      //覆盖式设置ui->textBrowser->append(html);      //追加式设置

效果
在这里插入图片描述


所有简单的 CSS 选择器
在这里插入图片描述

😟😟下一节更精彩😟😟


http://www.ppmy.cn/news/73363.html

相关文章

语音合成工具_bark

1 介绍 多语言的文字转语音模型。 地址: https://github.com/suno-ai/bark 2 模型原理 Bark通过三个Transformer模型&#xff0c;将文本转换为音频。 2.1 文本到语义Token 输入&#xff1a;由Hugging Face的BERT标记器分词的文本 输出&#xff1a;编码生成音频的语义Token…

【面试高频 time: 2023-5-18】做分布式文件存储,如何保证分布式存储的高性能与高可用?

大家可以想到基本就是副本备份、双活、多活这种架构 在系统中通过复制协议将数据同步到多个存储节点&#xff0c;并确 保多个副本之间的数据⼀致性&#xff0c;当某个存储节点出故障 时&#xff0c;系统能够⾃动将服务切换到其他的副本 在分布式存储中⾼性能与⾼可⽤是⽭盾的&…

手把手教你怎么搭建自己的ChatGPT和Midjourney绘图(含源码)

AI程序采用NUXT3LARAVEL9开发&#xff08;目前版本V1.1.7&#xff09; 授权方式&#xff1a;三个顶级域名两次更换 1.AI智能对话-对接官方和官方反代&#xff08;markdown输出&#xff09;PS:采用百度与自用库检测文字 2.AI绘图-根据关键词绘图-增加dreamStudio绘画-增加mid…

Requests的使用例子

Requests库是一个Python HTTP客户端库&#xff0c;用于向Web服务器发送HTTP请求。它提供了简单而直观的API&#xff0c;使得向Web服务器发送HTTP请求变得非常容易。以下是Requests库的一些功能和示例&#xff1a; 1、发送HTTP GET请求 发送HTTP GET请求非常简单&#xff0c;只…

查看linux日志以及处理不能登录mysql的错误

要查看MariaDB的日志文件&#xff0c;可以使用以下命令&#xff1a; 1. 错误日志文件&#xff1a; bash sudo cat /var/log/mariadb/error.log 这将显示MariaDB的错误日志文件的内容。如果在默认位置找不到错误日志文件&#xff0c;您可以尝试查找其他可能的位置&#…

Activiti实战——Springboot整合Activiti

目录 一、Activiti数据库表名说明 二、Spring boot整合activiti 1. 创建springboot项目 2. 引入activiti依赖及项目依赖 3. 配置数据源 &#xff08;1&#xff09;创建数据源配置文件 &#xff08;2&#xff09;配置文件 4. 配置Acitviti引擎 5. 启动项目 三、Activiti…

DJ5-4 交换局域网(第一节课)

目录 一、局域网概述 1、LAN 的特点和分类 2、常见的网络拓扑结构 二、计算机与局域网的连接 三、局域网体系结构 四、链路层寻址地址 1、MAC 地址分配 2、MAC 地址识别 五、ARP 地址解析协议 1、ARP 地址解析协议 2、ARP&#xff1a;两个主机位于同一个局域网 3、…

Godot引擎 4.0 文档 - 入门介绍 - Godot 关键概念概述¶

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a;Overview of Godots key concepts — Godot Engine (stable) documentation in English Godot 关键概念概述 每个游戏引擎都围绕您用来构建应用程序的抽象展开。在 Godo…

AUTOSAR知识点 之 COM (二):ISOLAR-AB的配置

目录 1、概述 2、ISOLAR-AB配置 2.1、ComGeneral 2.2、ComConfig 2.2.1、ComGwMapping 2.2.2、ComIPduGroups 2.2.3、ComIPdus

超越大数据的边界:Apache Flink实战解析【上进小菜猪大数据系列】

上进小菜猪&#xff0c;沈工大软件工程专业&#xff0c;爱好敲代码&#xff0c;持续输出干货。欢迎订阅专栏 Apache Flink是一种快速、可靠、可扩展的开源流处理框架&#xff0c;被广泛应用于大数据领域。本文将介绍Apache Flink的实战运用&#xff0c;包括其核心概念、架构设…

LeetCode346场周赛

2023.5.21LeetCode346场周赛 A. 删除子串后的字符串最小长度 思路 使用栈模拟&#xff0c;每当遇到AB和CD时出栈 代码 class Solution { public:int minLength(string s) {string res s.substr(0, 1);for (int i 1; i < s.size(); i ) {res s[i];int n res.size()…

选择性搜索算法(Selective Search )——SS算法

文章目录 一、前言二、object Detection VS object Recognition&#xff08;Selective Search的提出&#xff09;2.1object recognition与object detection的关系2.2滑动窗口方法的局限性2.3Selective search算法的提出 三、Selective Search算法3.1什么是Selective Search&…

基于yolov3训练自己的数据集

训练数据集的教学视频链接 42. 第六章&#xff1a;基于YOLO-V3训练自己的数据集与任务_哔哩哔哩_bilibili 数据打标签 下载labelme标注工具 通过pip install labelme下载&#xff0c;打开anaconda prompt&#xff0c;切换到下载labelme的环境&#xff08;我的是pytorch&…

异步线程:CompletableFuture、@Async

区别: 1.CompletableFuture是java中提供的一个异步执行类&#xff0c;Async是Spring提供的异步执行方法&#xff0c;当调用方法单独开启一个线程进行调用。 2.Async通常指定一个方法使用的异步方法调用&#xff0c;而CompletableFuture可以一个方法体内对请求体进行排序组合成…

yolov5剪枝与知识蒸馏【附代码】

剪枝和知识蒸馏均属于模型轻量化设计&#xff0c;剪枝是将已有网络通过剪枝的手段得到轻量化网络&#xff0c;可分为非结构化剪枝和结构化剪&#xff0c;该技术可以免去人为设计轻量网络&#xff0c;而是通过计算各个权重或者通道的贡献度大小&#xff0c;剪去贡献度小的权重或…

面了个 Java 实习生,小伙很优秀!

大家好&#xff0c;我是鱼皮&#xff0c;前几天给自己的公司面试了一位 Java 暑期实习生&#xff0c;候选人目前是大三。 整个过程我都录屏了&#xff0c;并且在征得候选人的同意后&#xff0c;把面试过程分享出来。一方面是希望对其他在学编程找工作的小伙伴有一些启发和参考…

思迈特软件Smartbi荣登“2023未来银行科技服务商100强”

近日&#xff0c;中国科学院《互联网周刊》、eNet研究院联合发布了“2023未来银行科技服务商100强”企业榜单。思迈特软件以“商业智能BI产品”凭借在金融科技创新的独特优势及在银行数字化转型实践中的卓越成就荣耀上榜。 据了解&#xff0c;“未来银行科技服务商100强”榜单&…

Spring IOC 的理解

IoC容器是什么&#xff1f; IoC文英全称Inversion of Control&#xff0c;即控制反转&#xff0c;我么可以这么理解IoC容器&#xff1a; “把某些业务对象的的控制权交给一个平台或者框架来同一管理&#xff0c;这个同一管理的平台可以称为IoC 容器。” 我们刚开始学习…

Java读取txt文件:TSP问题测试算例att48.txt

目录 1读取文件1.1 JDK1.5的Scanner类读取1.2 JDK8的Files.linesStream流按行读取&#xff08;推荐&#xff09;1.3 JDK11提供的Files.readString()1.4 FileInputStreamInputStreamReaderBufferedReader按行读取1.5 经典管道流方式&#xff08;推荐&#xff09; 2 JAVA快速统计…

GEE遥感云大数据林业应用典型案例及GPT模型

详情点击链接&#xff1a;GEE遥感云大数据林业应用典型案例及GPT模型 一&#xff1a;平台及基础开发平台 GEE平台及典型应用案例&#xff1b;GEE开发环境及常用数据资源&#xff1b;ChatGPT、文心一言等GPT模型、帐号申请及林业遥感JavaScript基础&#xff1b;GEE遥感云重要概…