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

【JavaEE】_CSS选择器

news 文章来源：https://blog.csdn.net/m0_63299495/article/details/136102579 2024/9/20 18:30:31

1. 基本语法格式

2. 引入方式

2.1 内部样式

2.2 内联样式

2.3 外部样式

3. 基础选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

1. 基本语法格式

选择器+若干属性声明

2. 引入方式

2.1 内部样式

使用style标签，直接把CSS写到HTML文件中：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* {}中编写CSS属性，可以写一个或多个每个属性都是一个键值对，键和值之间用:分割，键值对之间用;分割每个键值对既可独占一行，也可不独占一行*/color:green;font-size: 30px;}</style>
</head>
<body><p>这是一个段落</p>
</body>
</html>

注：style标签可以编写在代码的任何位置：head标签中可以，body标签中也可；

2.2 内联样式

使用style属性，针对指定的元素设置样式：

<!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>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

注：（1）不需要写选择器，直接写属性键值对，此时只对当前元素生效；

（2）内联样式的优先级高于外部样式的优先级：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:red;}</style>
</head>
<body><p style="color:green; font-size: 40px;">这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

2.3 外部样式

外部样式就是把CSS代码单独作为一个CSS文件，再通过link属性，令HTML引入该CSS文件：

（1）在当前html文件所在文件夹下创建css文件，名为：STYLE.css：

p{color:blue;font-size: 25px;
}

（2）在code2.html文件中引用CSS文件并运行如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="STYLE.css">
</head>
<body><p>这是一个段落</p><p>这是另一个段落</p>
</body>
</html>

根据目录打开文件：

注：外部样式是在实际开发中最常见的编写CSS的方式，这种方式可以有效实现HTML和CSS分离开来，相互不影响。（为演示简单方便，教学中多采用内部样式）

3. 基础选择器

3.1 标签选择器

在大括号前写标签名字，表示选中当前页面中所有的指定标签；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{color:goldenrod;font-size: 25px;}</style>
</head>
<body><p>这是第一个段落</p><div>这是一个div</div><p>这是第二个段落</p>
</body>
</html>

根据目录打开文件：

所有的p标签都被设置了

3.2 类选择器

可以创建CSS类，手动指定哪些元素应用这个类：

<!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>
<body><style>/* 定义一个CSS类，类名为.one */.one{color:brown;}.two{color:darkgreen;}.three{color:cornflowerblue;}.four{font-size: 25px;}</style><div class="one">这是第一个div</div><div class="two">这是第二个div</div><div class="one">这是第三个div</div><div class="three four">这是第四个div</div>
</body>
</html>

注：（1）此处的类与面向对象的类无关，CSS的类是一组属性的集合，方便其他地方引用；

（2）在CSS中，定义类名必须以.开头，但在body对应段落中引用类时不需要再加.；

（3）一个类可以被一个元素引用，也可以被多个元素引用；

一个元素可以引用一个类，也可以引用多个类；

（4）CSS全称为Cascading Style Sheets，即：层叠样式表，即一个元素可以被应用多组样式的，这些样式就像层层叠加一样，在网页中打开DOM资源管理器选中第四个div查看样式：

即第四个div最终效果是由font-size和color两个属性叠加起来的综合效果；

3.3 ID选择器

HTML页面中的每个元素都可以设置一个唯一的id，作为元素的身份标识：给元素安排id后，就可以通过id来选中对应元素：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#firstDiv{color:brown;}</style>
</head>
<body><div id="firstDiv">这是一个div</div><div id="secondDiv">这是另一个div</div>
</body>
</html>

注：（1）同一个页面中元素的id必须是唯一的，跨页面可以存在重名的id；

（2）对于类选择器，允许令多个元素应用同一个类的；

对于ID选择器，则只能针对唯一的元素生效；

4. 复合选择器

以上三选择器均属于简单的基础选择器，除此之外，CSS还支持一些更复杂的复合选择器，即组合基础选择器；

4.1 后代选择器

<!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>
<body><style>ul li{color:brown;}.one li{color:forestgreen;}</style><ol class="one"><li>aaa</li><li>bbb</li><li>ccc</li></ol><ol><li>aaa</li><li>bbb</li><li>ccc</li></ol><ul><li>aaa</li><li>bbb</li><li>ccc</li></ul>
</body>
</html>

根据目录打开文件：

注：（1）写法含义为：先去页面中查询所有的ul，再在这些ul中查询所有的li，此时页面中ol中的li是不会被选中的；

（2）li只要是ul的后代即可，不只是子元素，孙代元素亦可；

（3）后代选择器可以将多个简单基础选择器进行组合，可以是标签、类、id选择器的任意组合；

4.2 子选择器

子选择器也是将多个基础选择器进行组合，但子选择器只找匹配的子元素，不找孙代元素，针对性更强：

格式为：选择器1>选择器2{

属性...

}

比如：基于以下body内代码：

    <div class="one"><!-- 链接1元素是one的子元素 --><a href="#">链接1</a><!-- p标签是one的子元素 --><p><!-- 链接2是one的孙子元素 --><a href="#">链接2</a></p></div>

分别使用后代选择器表示法（空格）与子选择器表示法（>）：

（1）后代选择器：

    <style>.one a{color:red;}</style>

根据目录打开文件：

子元素与孙代元素均被选择器选中，变为红色；

（2）子选择器：

    <style>.one>a{color:red;}</style>

子元素被选中，变为红色；

孙代元素没有被选中，仍旧为默认色；

4.3 并集选择器

语法格式为：

选择器1, 选择器2{

属性...

}

含义为：既针对选择器1生效，又对选择器2生效，即多组选择器应用了同样的样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.two{font-size: 25px;}.three{font-size: 25px;}</style>
</head>
<body><div class="one"><a href="#" class="two">链接1</a><p><a href="#" class="three">链接2</a></p></div>
</body>
</html>

对于以上代码，将two类与three类中的内容字体均设置为25px，可以使用并集选择器实现：

    <style>.two, .three{font-size: 25px;}</style>

运行结果如下：

4.4 伪类选择器

伪类选择器是复合选择器的一种特殊用法。之前的选择器是选中某个元素，但伪类选择器选中某个元素的某个特定状态；

（1）:hover 鼠标悬停时的状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.one:hover{color:red;font-size: 40px;/* 表示鼠标悬停在内容上时，字体变红且字体变为40像素*/}</style>
</head>
<body><div class="one">这是一个div</div>
</body>
</html>

运行后页面如下：

鼠标未悬停在字体上时：

鼠标悬停在字体上时：

（2）:active 鼠标按下时的状态

【JavaEE】_CSS选择器

目录 1. 基本语法格式 2. 引入方式 2.1 内部样式 2.2 内联样式 2.3 外部样式 3. 基础选择器 3.1 标签选择器 3.2 类选择器 3.3 ID选择器 4. 复合选择器 4.1 后代选择器 4.2 子选择器 4.3 并集选择器 4.4 伪类选择器 1. 基本语法格式选择器若干属性声明 2. 引入…...

编程日记 2024/2/14 12:22:57

Flaurm实现中文搜索

目录摘要需求本文涉及环境情况如下解决方案最终效果文章其他链接： 摘要 Flarum本身对中文支持并不理想，但随着版本更新，逐渐加强了对中文的优化。然而在1.8.5版本，却还是不支持中文搜索网站文章内容。作者在检索了全网教程&#…...

编程日记 2024/2/14 12:20:55

STM32自学☞定时器外部时钟案例

本案例主要是通过外部时钟实现对射式红外传感器的计次，在oled显示屏上显示CNT的次数 timer_interrupt.c文件 #include "stm32f10x.h" #include "stm32f10x_tim.h" #include "timer_interrupt.h" #include "stdint.h" …...

编程日记 2024/2/14 12:19:53

PyCharm中无法调用ffmpeg命令行

问题前提 ffmpeg在系统中正确安装，且在cmd命令行可以正确使用。但在PyCharm中无法调用！ 但是在外部系统cmd中使用确是正常的~ 问题关键我的python解释器使用的是anaconda的虚拟环境，导致在外部环境配置的path路径没有包括在内解决办法…...

编程日记 2024/2/14 12:18:53

Go基础知识学习-习题题解

这里给出来官方教程中部分题目的答案，都是自己练习的时候写的，可以参考来提供思路。当然了，练习还是最好自己写，要不对相关的知识点不可能理解透彻。 Exercise: Loops and Functions package mainimport ("fmt" )fu…...

编程日记 2024/2/14 12:17:51

MyBatis中的XML实现和动态SQL实现

文章目录一、XML实现1.1增1.2删1.3查1.4改二、XML方式实现动态SQL2.1if标签2.2trim标签2.3where标签2.4set标签2.5foreach标签2.6include标签和sql标签一、XML实现先在新建的XML文件中写入如下内容： <?xml version"1.0" encoding"UTF-8&qu…...

编程日记 2024/2/14 12:13:47

问题计算如图所示前后两点经纬度的距离？ 方法 1、用开窗函数将如图所示数据下移一行 selectlongitude lon1,latitude lat1,min(longitude) over(order by time1 asc rows between 1 PRECEDING and 1 PRECEDING) lon2,min(latitude) over(order by time1 asc row…...

编程日记 2024/2/14 12:11:45

【51单片机】DS18B20（江科大）

一、DS18B20温度传感器 1.DS18B20介绍 DS18B20是一种常见的数字温度传感器,其控制命令和数据都是以数字信号的方式输入输出,相比较于模拟温度传感器,具有功能强大、硬件简单、易扩展、抗干扰性强等特点测温范围 :- 55℃到125℃ 通信接口:1-Wire(单总线) 其它特征:可形成…...

编程日记 2024/2/14 12:10:44

Windows平台git clone文件路径太长报错

问题描述在Windows下拉取一些比较大的开源项目经常会提示文件路径太长（filename too long），然后死活都不成功解决办法 1.配置git git config --system core.longpaths true2.修改文件C:\Program Files\Git\etc\gitconfig（需…...

编程日记 2024/2/14 12:07:42

中科大计网学习记录笔记（十）：P2P 应用

前言： 学习视频：中科大郑烇、杨坚全套《计算机网络（自顶向下方法第7版，James F.Kurose，Keith W.Ross）》课程该视频是B站非常著名的计网学习视频，但相信很多朋友和我一样在听完前面的部分发现信…...

编程日记 2024/2/14 12:05:40

Python算法题集_LRU 缓存

Python算法题集_LRU 缓存题146：LRU 缓存1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【队列字典】2) 改进版一【有序字典】3) 改进版二【双向链表字典】 4. 最优算法本文为Python算法题集之一的代码示例题146：LRU …...

编程日记 2024/2/14 12:03:38

局部加权回归

局部加权回归（Local Weighted Regression）是一种非参数回归方法，用于解决线性回归模型无法很好拟合非线性数据的问题。它通过给不同的样本赋予不同的权重，使得在拟合模型时更加关注靠近目标点附近的样本数据。局部加权回归的基本…...

编程日记 2024/2/14 12:02:36

国内国外最好的数据恢复软件评测，哪种数据恢复软件最有效？

随着数字和商业格局在多个领域不断发展，变得更加依赖数据，威胁数据的努力也同样存在。计算机病毒、勒索软件和恶意软件是导致数据丢失的主要威胁，可能会让您的组织陷入停机或严重影响您的工作效率。而解决这个问题的方法就是数据恢复。什么…...

编程日记 2024/2/14 12:01:35

bugku 1

Flask_FileUpload 文件上传先随便传个一句话木马看看回显果然不符合规定而且发现改成图片什么的都不行查看页面源代码，发现提示那应该就要用python命令才行试试ls 类型要改成图片 cat /flag 好像需要密码 bp爆破根据提示，我们先抓包爆破 …...

编程日记 2024/2/14 12:00:34

C++ bfs再探迷宫游戏（五十五）【第二篇】

今天我们用bfs解决迷宫游戏。 1.再探迷宫游戏前面我们已经接触过了迷宫游戏，并且学会了如何使用 DFS 来解决迷宫最短路问题。用 DFS 求解迷宫最短路有一个很大的缺点，需要枚举所有可能的路径，读入的地图一旦很大，可能的搜索方案…...

编程日记 2024/2/14 11:59:33

【Spring原理进阶】SpringMVC调用链＋JSP模板应用讲解

🎉🎉欢迎光临🎉🎉 🏅我是苏泽，一位对技术充满热情的探索者和分享者。🚀🚀 🌟特别推荐给大家我的最新专栏《Spring 狂野之旅：底层原理高级进阶》 &#x1f680…...

编程日记 2024/2/14 11:58:32

23种计模式之Python/Go实现

目录设计模式what?why?设计模式：设计模式也衍生出了很多的新的种类，不局限于这23种创建类设计模式（5种）结构类设计模式（7种）行为类设计模式（11种） 六大设计原则开闭原则里氏替换原…...

编程日记 2024/2/14 11:54:28

Qt可视化大屏布局

科技大屏现在非常流行，这里分享一下某个项目的大屏布局（忘了源码是哪个博主的了） 展示这个界面整体是垂直布局，分为两个部分，标题是一个部分，然后下面的整体是一个layout布局，为另外一部分。 l…...

编程日记 2024/2/14 11:52:26

re:从0开始的CSS之旅 14. 显示模式的切换

1. 两个属性 display 属性可以用于转换元素的显示模式可选值： block 转换为块元素 inline 转换为行内元素 inline-block 转换为行内块元素 none 不显示元素，并且不占用元素的位置 visibility 属性用于设置元素是否显示可选值： visible 显示…...

编程日记 2024/2/14 11:44:18

K8S系列文章之 [Alpine基础环境配置]

用户手册：Alpine User Handbook 官方WIKI：Alpine Linux WIKI 安装安装的实际逻辑是通过 setup-alpine 脚本去调用其他功能的脚本进行配置，可以通过 vi 查看脚本。如果某个部分安装失败，可退出后单独再次执行。通过镜像文件&a…...

编程日记 2024/2/14 11:40:14

单页404源码

<!doctype html> <html> <head> <meta charset"utf-8"> <title>简约 404错误页</title><link rel"shortcut icon" href"./favicon.png"><style> import url("https://fonts.googleapis.co…...

编程日记 2024/2/14 11:36:09

MySQL-运维

一、日志 1.错误日志错误日志是MySQL中最重要的日志之一，它记录了当mysql启动和停止时，以及服务器在运行过程中发生任何严重错误时的相关性息。当数据库出现任何故障导致无法正常使用时，建议首先查看此日志。该日志是默认开启的&#xf…...

编程日记 2024/2/14 11:27:00

Waymo数据集下载与使用

在撰写论文时，接触到一个自动驾驶数据集Waymo Dataset 论文链接为：https://arxiv.org/abs/1912.04838v7 项目链接为：https://github.com/waymo-research/waymo-open-dataset 数据集链接为：https://waymo.com/open waymo提供了两种…...

编程日记 2024/2/14 11:24:57

蓝桥杯每日一题----素数筛

素数筛素数筛的作用是筛选出[2,N]范围内的所有素数，本次主要讲解两种方法，分别是埃氏筛和欧拉筛。证明时会提到唯一分解定理，如果不知道的小伙伴可以先去学一学，那我们开始啦！ 1.埃氏筛主要思想：当找到…...

编程日记 2024/2/14 11:22:55

20240212请问如何将B站下载的软字幕转换成为SRT格式？

20240212请问如何将B站下载的软字幕转换成为SRT格式？ 2024/2/12 12:47 百度搜索：字幕 json 转 srt json srt https://blog.csdn.net/a_wh_white/article/details/120687363?share_token2640663e-f468-4737-9b55-73c808f5dcf0 https://blog.csdn.net/a_w…...

编程日记 2024/2/14 11:21:53

《CSS 简易速速上手小册》第6章：高级 CSS 技巧（2024 最新版）

文章目录 6.1 使用 CSS 变量进行设计：魔法配方的调配6.1.1 基础知识6.1.2 重点案例：创建可定制的主题6.1.3 拓展案例 1：响应式字体大小6.1.4 拓展案例 2：使用 CSS 变量创建动态阴影效果 6.2 calc(), min(), max() 等函数的应用&am…...

编程日记 2024/2/14 11:15:46

2024-02-11 多进程、多线程 work

1. 创建一个多进程服务器和多线程服务器 a. 多进程 #include<myhead.h> #define PORT 9999 //端口号 #define IP "192.168.125.113" //IP地址//定义信号处理函数，用于回收僵尸进程 void handler(int signo) {if(signo S…...

编程日记 2024/2/14 11:11:41

详解结构体内存对齐及结构体如何实现位段~

目录编辑一：结构体内存对齐 1.1对齐规则 1.2.为什么存在内存对齐 1.3修改默认对齐数二.结构体实现位段 2.1什么是位段 2.2位段的内存分配 2.3位段的跨平台问题 2.4位段的应用 2.5位段使用的注意事项三.完结散花悟已往之不谏，知来者犹可…...

编程日记 2024/2/14 11:10:40

Linux网络编程——tcp套接字

文章目录主要代码关于构造listen监听accepttelnet测试读取信息掉线重连翻译服务器演示本章Gitee仓库：tcp套接字主要代码客户端： #pragma once#include"Log.hpp"#include<iostream> #include<cstring>#include<sys/wait.h…...

编程日记 2024/2/14 11:08:38

【计算机网络】协议层次及其服务模型

协议栈（protocol stack） 物理层链路层网络层运输层应用层我们自顶向下，所以从应用层开始探究应用层协议 HTTP 提供了WEB文档的请求和传送SMTP 提供电子邮件报文的传输FTP 提供两个端系统之间的文件传输报文（message）是…...

编程日记 2024/2/14 11:02:33

prometheus之redis_exporter部署

下载解压压缩包 mkdir /opt/redis_exporter/ cd /opt/redis_exporter/ wget http://soft.download/soft/linux/prometheus/redis_exporter/redis_exporter-v1.50.0.linux-amd64.tar.gz tar -zxvf redis_exporter-v1.50.0.linux-amd64.tar.gz ln -s /opt/redis_exporter/redis_…...

编程日记 2024/2/14 11:01:32

1. 基本语法格式

2. 引入方式

2.1 内部样式

2.2 内联样式

2.3 外部样式

3. 基础选择器

3.1 标签选择器

3.2 类选择器

3.3 ID选择器

4. 复合选择器

4.1 后代选择器

4.2 子选择器

4.3 并集选择器

4.4 伪类选择器

相关文章：