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

news2025/1/13 10:05:13

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.coloradmin.cn/o/551557.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

iptables 防火墙二

iptables 防火墙二

目录 SNAT 原理与应用SNAT原理&#xff1a;修改数据包的源地址。 SNAT 实验DNAT原理与应用DNAT原理&#xff1a;修改数据包的目的地址。DNAT转换前提条件&#xff1a; DNAT 示例 SNAT 原理与应用 SNAT 应用环境&#xff1a;局域网主机共享单个公网IP地址接入Internet&#xff…
阅读更多...
MyBatis技术练习

MyBatis技术练习

一、模仿教程练习增删改查&#xff0c;自己完成一个新表相关操作 1、配置fkxml文件 我们这里的增删改查sql语句必须对应我们自己创建的表 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.…
阅读更多...
实测有效：由于找不到MSVCP140.dll，无法继续执行代码

实测有效：由于找不到MSVCP140.dll，无法继续执行代码

从解决实际问题的角度上&#xff0c;推荐两种实测有效的方法。 先来说一下msvcp140.dll是什么&#xff1f; msvcp140.dll 是 Microsoft Visual C Redistributable for Visual Studio 2015 库文件的一部分。这个文件是一些需要 Visual Studio 2015 支持的程序所必需的。 如果…
阅读更多...
（C语言版）力扣（LeetCode）题库1-5题解析

（C语言版）力扣（LeetCode）题库1-5题解析

力扣&#xff08;LeetCode&#xff09;题库1-5题解析 1.两数之和题目解析 2.两数相加题目解法 3.无重复字符的最长字串题目解法 4. 寻找两个正序数组的中位数题目解法 5. 最长回文子串题目解法 结语 1.两数之和 题目 给定一个整数数组 nums 和一个整数目标值 target&#xff…
阅读更多...
Java基础---＞并发部分（3）【JUC、AQS】

Java基础---＞并发部分（3）【JUC、AQS】

文章目录 AQS&#xff08;AbstractQueuedSynchronizer&#xff09;AQS实现原理AQS操作重点方法 Java并发容器JUC&#xff08;java.util.concurrent&#xff09;ConcurrentHashMapCopyOnWriteArrayList AQS&#xff08;AbstractQueuedSynchronizer&#xff09; AbstractQueuedSy…
阅读更多...
如何从其他ETL工具迁移到ETLCloud上?

如何从其他ETL工具迁移到ETLCloud上?

ETL数据集成工具主要用于将来自不同数据源的数据整合到一个单一的、一致的数据存储库或将数据分发到不同的数据源中&#xff0c;同时也可以把数仓中的数据通过ETL反向输出给业务系统使用。它可以帮助企业解决数据共享问题&#xff0c;同时有效地管理和利用海量数据&#xff0c;…
阅读更多...
DAY 61 MySQL高级SQL语句

DAY 61 MySQL高级SQL语句

高级SQL语句&#xff08;进阶查询&#xff09; 先准备2个表 一个location表 use market;create table location(Region char(20),Store_Name char(20));insert into location values(East,Boston);insert into location values(East,New York);insert into location values(W…
阅读更多...
python数据可视化显示(附代码)

python数据可视化显示(附代码)

Python是一种非常流行的编程语言&#xff0c;具有广泛的应用领域&#xff0c;包括数据可视化。在数据可视化中&#xff0c;Python提供了多种工具来帮助用户创建各种类型的图表、图形和可视化效果。本文将介绍Python数据可视化的基本概念、工具和技术&#xff0c;并提供代码示例…
阅读更多...
CustomTkinter：【二】颜色和主题、外观模式、缩放、包装

CustomTkinter：【二】颜色和主题、外观模式、缩放、包装

GitHub地址: https://github.com/TomSchimansky/CustomTkinter 官网&#xff1a; https://customtkinter.tomschimansky.com/ 官方教程文档&#xff1a;https://customtkinter.tomschimansky.com/documentation/ 目录 1、颜色和主题2 、外观模式3 、缩放4、包装 1、颜色和主题 …
阅读更多...
2023/5/21周报

2023/5/21周报

目录 摘要 论文阅读 1、标题和现存问题 2、各个结构 3、基于GNN-LSTM-CNN 网络轨迹预测模型 4、实验准备 5、实验结果 深度学习 1、费舍尔判别 2、步骤具体化 3、GCN 总结 摘要 本周在论文阅读上&#xff0c;阅读了一篇基于GNN-LSTM-CNN网络的6G车辆轨迹预测算法的…
阅读更多...
git pull报没有足够内存 not enough memory for initialization

git pull报没有足够内存 not enough memory for initialization

git clone 或 git pull 批量同步远程 git仓库代码时&#xff0c;报 没有足够内存用于初始化 not enough memory for initialization。经过观察 资源管理器 的内存使用情况&#xff0c;发现为 剩余可用内存不足造成的。加物理内存麻烦&#xff0c;可通过适当调整 分页文件&…
阅读更多...
chatgpt赋能Python-pythoncom安装

chatgpt赋能Python-pythoncom安装

Pythoncom安装指南 如果你是一位Python编程的爱好者或专业工程师&#xff0c;那么你可能会需要使用Pythoncom库。Pythoncom是Python与COM技术相互操作的重要组件&#xff0c;它可以帮助你实现各种Windows应用程序与Python之间的无缝集成。 什么是Pythoncom Pythoncom是Pytho…
阅读更多...
电商项目9：新增商品

电商项目9：新增商品

电商项目9&#xff1a;新增商品 1、前端1.1、修复前端组件通信问题1.2、引入其他前端代码1.3、会员等级列表1.4、当前分类关联的所有品牌 2、后端2.1、会员系统搭建&#xff08;注册与发现&#xff09;2.2、当前分类关联的所有品牌2.3、获取分类下所有分组&关联属性 1、前端…
阅读更多...
网上书店管理系统

网上书店管理系统

系列文章 任务46 网上书店管理系统 文章目录 系列文章一、实践目的与要求1、目的2、要求 二、课题任务三、总体设计1.存储结构及数据类型定义2.程序结构3.所实现的功能函数4、程序流程图 四、小组成员及分工五、 测试添加新的图书购买信息显示所有图书购买信息按购买编号查找图…
阅读更多...
软件测试—Selenium01

软件测试—Selenium01

软件测试—Selenium01 &#x1f50e;自动化测试自动化测试的定义自动化测试的分类 &#x1f50e;SeleniumSelenium 是什么Selenium 的特点Selenium 的原理Selenium Java 的环境搭建Selenium 中常用的 APIBy.cssSelector()By.xpath()By.cssSelector() 与 By.xpath() 的比较 &am…
阅读更多...
C++编译和链接

C++编译和链接

目录 一、源代码的组织 ①头文件&#xff08;*.h&#xff09; ②源文件&#xff08;*.cpp&#xff09; ③主程序&#xff08;main函数所在的程序&#xff09; ④从源代码到可执行文件&#xff0c;编译的过程有三大步骤&#xff1a; 1&#xff09;编译预处理 2&#xff09…
阅读更多...
Python学习笔记——《吴恩达Machine Learning》线性回归例程

Python学习笔记——《吴恩达Machine Learning》线性回归例程

文章目录 案例背景线性回归&#xff08;Loss Regression&#xff09;梯度下降法&#xff08;批量梯度下降算法——batch gradient descent&#xff09;计算成本函数和梯度下降使用线性回归拟合训练数据模型预测 梯度下降效果可视化完整版demo 案例背景 详情参照吴恩达机器学习…
阅读更多...
Linux/Windows安装Maven

Linux/Windows安装Maven

一、Linux部署Maven 注意&#xff1a;必须先安装jdk&#xff0c;maven与jdk&#xff08;java -version&#xff09;版本会有对应关系 版本对应&#xff08;必看&#xff01;&#xff09;&#xff1a;http://maven.apache.org/docs/history.html 官方tar包下载地址&#xff1a;h…
阅读更多...
因为一个Bug，差点损失了100w

因为一个Bug，差点损失了100w

大家好&#xff0c;我是洋子 最近在做单接口的性能测试比较多&#xff0c;在压测过程发现了一个比较有意思的问题&#xff0c;拿出来和大家分享一下 背景是这样的&#xff0c;最近在搞线上的抽奖活动&#xff0c;压测的对象是一个抽奖接口&#xff0c;主要的逻辑见程序的流程…
阅读更多...
Spring ioc容器

Spring ioc容器

Spring ioc容器 导入 spring 容器包 使用 ioc 容器之前&#xff0c;需要先导入 Spring 的包 在 spring maven中下载 spring maven 网址:Maven Repository: spring (mvnrepository.com) 搜索 spring 找到 Spring Web MVC点击 spring-webmvc 进入 选择一个版本号点击&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023