【JavaEE】_CSS选择器

news2024/11/24 23:07:38

目录

 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 鼠标按下时的状态

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

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

相关文章

C语言从零实现贪吃蛇小游戏

C语言从零实现贪吃蛇小游戏

制作不易&#xff0c;点赞关注一下呗&#xff01;&#xff01;&#xff01; 文章目录 前言一. 技术要点二、WIN32API介绍三、贪吃蛇游戏设计与分析 1.游戏开始前的初始化 2.游戏运行的逻辑 总结 前言 当我们掌握链表这样的数据结构之后&#xff0c;我们就可以用它来…
阅读更多...
Rust 学习笔记 - Hello world

Rust 学习笔记 - Hello world

前言 本文将讲解如何完成一个 Rust 项目的开发流程&#xff0c;从编写 “Hello, World!” 开始&#xff0c;到使用 Cargo 管理和运行项目。 编写 Hello world 开始一个新项目很简单&#xff0c;首先&#xff0c;创建一个包含 main.rs 文件的 hello_world 文件夹&#xff0c;…
阅读更多...
GPT翻译网站的加载与使用

GPT翻译网站的加载与使用

Sider: ChatGPT侧边栏 GPTs, GPT-4 Turbo, 联网, 绘图 sider.ai https://chromewebstore.google.com/detail/sider-chatgpt%E4%BE%A7%E8%BE%B9%E6%A0%8F-gpts-g/difoiogjjojoaoomphldepapgpbgkhkb?hlzh-CN 加入与移除 第二个翻译网站 https://chromewebstore.google.com/…
阅读更多...
电商小程序08调用缓存

电商小程序08调用缓存

目录 1 将信息存入缓存中2 获取登录信息3 退出登录4 发布预览总结 小程序的登录功能里&#xff0c;如果只是将登录信息保存到全局变量中&#xff0c;存在的问题是如果小程序重新打开&#xff0c;用户的登录状态就丢失了。为了解决这个问题&#xff0c;我们需要用到微搭的缓存的…
阅读更多...
13-k8s的控制器资源-rc控制器replicationcontrollers

13-k8s的控制器资源-rc控制器replicationcontrollers

一、rc控制器资源的概述 replicationcontrollers控制器资源&#xff0c;简称&#xff1a;rc控制器&#xff1b; 简单理解&#xff0c;rc控制器就是控制相同的pod副本数量&#xff1b; 使用rc控制器资源创建pod&#xff0c;就可以设定创建pod的数量&#xff1b; 二、rc控制器资源…
阅读更多...
C++中对象的构造与析构顺序

C++中对象的构造与析构顺序

一、对象的构造顺序 对象的构造&#xff0c;先被创建的对象&#xff0c;先被构造&#xff0c;先调用其构造函数 class A { private:int _a 0; public://构造函数A(int a 0){_a a;cout << "A(int a 0)" << " " << _a << endl…
阅读更多...
NVIDIA 刚刚揭秘了他们的最新大作——Eos，一台跻身全球十强的超级计算机

NVIDIA 刚刚揭秘了他们的最新大作——Eos，一台跻身全球十强的超级计算机

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
HCIA-HarmonyOS设备开发认证V2.0-内核扩展组件

HCIA-HarmonyOS设备开发认证V2.0-内核扩展组件

目录 一、CPU 占用率1.1、CPU 占用率基本概念1.2、CPU 占用率运行机制1.3、CPU 占用率开发流程 二、动态加载2.1、 动态加载基本概念2.2、动态加载运行机制 坚持就有收获 一、CPU 占用率 1.1、CPU 占用率基本概念 CPU&#xff08;中央处理器&#xff0c;Central Processing U…
阅读更多...
Java 学习和实践笔记（11）

Java 学习和实践笔记（11）

三大神器&#xff1a; 官方网址: http://www.jetbrains.com/idea/ 官方网址: https://code.visualstudio.com/ 官方网址: http://www.eclipse.org 装好了idea社区版&#xff0c;并试运行以下代码&#xff0c;OK&#xff01; //TIP To <b>Run</b> code, press &l…
阅读更多...
洛谷AT_abc034_a[ABC034A] テスト

洛谷AT_abc034_a[ABC034A] テスト

#先看题目 题目描述 输入格式 无 输出格式 无 题意翻译 输入两个数字 x 和 y&#xff0c;如果 y>x 输出Better&#xff0c;否则输出Worse。 输入输出样例 无 题目链接https://www.luogu.com.cn/problem/AT_abc034_a #思路 没有 #最后附上完整代码 #include&l…
阅读更多...
(02)Hive SQL编译成MapReduce任务的过程

(02)Hive SQL编译成MapReduce任务的过程

目录 一、架构及组件介绍 1.1 Hive底层架构 1.2 Hive组件 1.3 Hive与Hadoop交互过程 二、Hive SQL 编译成MR任务的流程 2.1 HQL转换为MR源码整体流程介绍 2.2 程序入口—CliDriver 2.3 HQL编译成MR任务的详细过程—Driver 2.3.1 将HQL语句转换成AST抽象语法树 词法、语…
阅读更多...
二叉树的锯齿形层序遍历

二叉树的锯齿形层序遍历

1.题目 这道题是2024-2-16的签到题&#xff0c;题目难度为中等。 考察知识点为BFS算法和双端队列。 题目链接&#xff1a;二叉树的锯齿形层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行…
阅读更多...
VScode写LaTeX配置，实测有效

VScode写LaTeX配置，实测有效

环境配置请看LaTeX环境配置-TexLive&#xff0c;实测有效http://t.csdnimg.cn/0txlL VScode写LaTeX配置 0.smatra pdf下载 如果使用外部pdf查看器&#xff0c;比如我用的sumatra pdf,官网是Sumatra PDF reader download page 下载对应版本&#xff0c;比如64位&#xff0c;下…
阅读更多...
【STM32 CubeMX】I2C中断方式与DMA方式

【STM32 CubeMX】I2C中断方式与DMA方式

文章目录 前言一、I2C中断方式1.1 CubeMX配置I2C中断1.2 I2C中断函数使用Master模式Mem模式 1.3 DMA方式发送和接收CubeMX配置IIC DMA方式Master模式Mem模式 总结 前言 在STM32 CubeMX环境中&#xff0c;I2C&#xff08;Inter-Integrated Circuit&#xff09;通信协议的实现可…
阅读更多...
机器人专题：我国机器人产业园区发展现状、问题、经验及建议

机器人专题：我国机器人产业园区发展现状、问题、经验及建议

今天分享的是机器人系列深度研究报告&#xff1a;《机器人专题&#xff1a;我国机器人产业园区发展现状、问题、经验及建议》。 &#xff08;报告出品方&#xff1a;赛迪研究院&#xff09; 报告共计&#xff1a;26页 机器人作为推动工业化发展和数字中国建设的重要工具&…
阅读更多...
【数据结构】无向图创建邻接矩阵、深度优先遍历和广度优先遍历（C语言版）

【数据结构】无向图创建邻接矩阵、深度优先遍历和广度优先遍历（C语言版）

无向图创建邻接矩阵、深度优先遍历和广度优先遍历 一、概念解析&#xff1a; &#xff08;1&#xff09;无向图&#xff1a;&#xff08;2&#xff09;邻接矩阵&#xff1a; 二、创建邻接矩阵&#xff1a;三、深度遍历、广度遍历 &#xff08;1&#xff09;深度遍历概念&#x…
阅读更多...
模型 IPO(输入、处理、输出)学习模型

模型 IPO(输入、处理、输出)学习模型

系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_总纲目录。重在提升认知。信息转化与传递。 1 模型 IPO(输入、处理、输出)学习模型的应用 1.1 项目管理知识体系 PMBOK 中的IPO应用 在项目管理领域&#xff0c;PMBOK&#xff08;Project Management Body of Know…
阅读更多...
ChatGPT绘图指南：DALL.E3玩法大全(一)

ChatGPT绘图指南：DALL.E3玩法大全(一)

一、 DALLE.3 模型介绍 1、什么是 DALLE.3 模型&#xff1f; DALLE-3模型&#xff0c;是一种由OpenAI研发的技术&#xff0c;它是一种先进的生成模型&#xff0c;可以将文字描述转化为清晰的图片。这种模型的名称"DALLE"实际上是"Deep Auto-regressive Latent …
阅读更多...
云计算基础-存储虚拟化（深信服aSAN分布式存储）

云计算基础-存储虚拟化（深信服aSAN分布式存储）

什么是存储虚拟化 分布式存储是利用虚拟化技术 “池化”集群存储卷内通用X86服务器中的本地硬盘&#xff0c;实现服务器存储资源的统一整合、管理及调度&#xff0c;最终向上层提供NFS、ISCSI存储接口&#xff0c;供虚拟机根据自身的存储需求自由分配使用资源池中的存储空间。…
阅读更多...
AcWing 1235. 付账问题（贪心）

AcWing 1235. 付账问题（贪心）

[题目概述] 几个人一起出去吃饭是常有的事。 但在结帐的时候&#xff0c;常常会出现一些争执。 现在有 n 个人出去吃饭&#xff0c;他们总共消费了 S 元。 其中第 i 个人带了 a i a_i ai​ 元。 幸运的是&#xff0c;所有人带的钱的总数是足够付账的&#xff0c;但现在问题来…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023