【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. 引入方式

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.mzph.cn/news/692668.shtml

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

相关文章

力扣：40. 组合总和 II

力扣：40. 组合总和 II

回溯&#xff1a; 1.先声明好大集合和小集合&#xff0c;在调用回溯函数&#xff0c;终止条件为sumtarget&#xff0c;要进行剪枝操作减少遍历的次数&#xff0c;去重操作防止数组中有两个相同的值来组成的集合相同。 class Solution {List<List<Integer>> li1ne…
阅读更多...
Leetcode日记 290. 单词规律 给定一种规律 pattern 和一个字符串 s ，判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配

Leetcode日记 290. 单词规律 给定一种规律 pattern 和一个字符串 s ，判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配

Leetcode日记 290. 单词规律 给定一种规律 pattern 和一个字符串 s &#xff0c;判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配 解题思路制作不易&#xff0c;感谢三连&#xff0c;谢谢啦 给定一种规律 pattern 和一个字符串 s &#xff0c;判断 s 是否遵循相同的规律。…
阅读更多...
ChatGPT：你的数字生活助手

ChatGPT：你的数字生活助手

ChatGPT&#xff1a;你的数字生活助手 随着人工智能的飞速发展&#xff0c;AI写作技术成为了一个备受争议的话题。ChatGPT作为OpenAI开发的先进语言模型&#xff0c;不仅提供了对话和问题解答服务&#xff0c;还成为了提升日常工作和生活效率的强大工具。然而&#xff0c;许多…
阅读更多...
WEB基础及http协议(Apache)

WEB基础及http协议(Apache)

一、httpd安装组成 http服务基于C/S结构 1、常见http服务器程序 httpd apache&#xff0c;存在C10K&#xff08;10K connections&#xff09;问题nginx 解决C10K问题lighttpdIIS .asp 应用程序服务器tomcat .jsp 应用程序服务器jetty 开源的servlet容器&#xff0c;基于Java…
阅读更多...
【Java代码审计】本地命令执行函数

【Java代码审计】本地命令执行函数

1.本地命令执行函数 在服务器中时常会调用命令执行的代码&#xff0c;以完善或加强系统的功能需求&#xff0c;一旦这些调用命令执行的接口被攻击者恶意利用&#xff0c;就会导致服务器沦陷。 在Java中可用于执行系统命令的方式有API有&#xff1a;java.lang.Runtime、java.la…
阅读更多...
基于微信小程序的比赛赛程管理系统设计与实现

基于微信小程序的比赛赛程管理系统设计与实现

在全面健身的倡导下通过各级赛事的举办完成体育人才的选拔&#xff0c;当由于缺乏信息化的管理手段而只能通过人工完成比赛报名、赛程制定及成绩记录等流程的管理&#xff0c;因此常常因意外而导致比赛赛程管理不善、成绩不理想等问题出现。为了帮助比赛组织者优化赛程管理流程…
阅读更多...
最大加权矩阵（洛谷）

最大加权矩阵（洛谷）

题目 原题 题目描述 为了更好的备战 NOIP2013&#xff0c;电脑组的几个女孩子 LYQ,ZSC,ZHQ 认为&#xff0c;我们不光需要机房&#xff0c;我们还需要运动&#xff0c;于是就决定找校长申请一块电脑组的课余运动场地&#xff0c;听说她们都是电脑组的高手&#xff0c;校长没有…
阅读更多...
【Webpack】基本配置

【Webpack】基本配置

核心概念 entry&#xff08;入口&#xff09; 指示 Webpack 从哪个文件开始打包 output&#xff08;输出&#xff09; 指示 Webpack 打包完的文件输出到哪里去&#xff0c;如何命名等 loader&#xff08;加载器&#xff09; webpack 本身只能处理 js、json 等资源&#x…
阅读更多...
微服务建构思想

微服务建构思想

微服务架构思想 微服务架构优点 1、易于开发和维护:一个微服务只会关注一个特定的业务功能。所以它业务清晰。代码量较少。开发和维护 单个微服务相对简单。而整个应用是由若干个微服务构建而成的。 2、单个微服务启动较快:单个微服务代码量较少&#xff0c;所以启动比较快。 …
阅读更多...
CSS position属性sticky

CSS position属性sticky

在开发时&#xff0c;经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候&#xff0c;让一部分内容作为navbar&#xff0c;也就是置顶显示&#xff0c;我们一般会使用js监听scroll事件来实现&#xff0c;但是新增的css3属性position:sticky可以简单实现&#xff0c;省去…
阅读更多...
【动态规划专栏】专题二：路径问题--------6.地下城游戏

【动态规划专栏】专题二：路径问题--------6.地下城游戏

本专栏内容为&#xff1a;算法学习专栏&#xff0c;分为优选算法专栏&#xff0c;贪心算法专栏&#xff0c;动态规划专栏以及递归&#xff0c;搜索与回溯算法专栏四部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握算法。 &#x1f493;博主csdn个人主页&#xff1a;小…
阅读更多...
C# 二分查找

C# 二分查找

二分查找&#xff08;Binary Search&#xff09;是一种在有序数组或列表中查找特定元素的搜索算法。该算法比较要搜索的值和数组的中间元素。如果要搜索的值小于中间元素&#xff0c;则在数组的左半部分继续搜索&#xff1b;如果要搜索的值大于中间元素&#xff0c;则在数组的右…
阅读更多...
Vue | （三）使用Vue脚手架（中）| 尚硅谷Vue2.0+Vue3.0全套教程

Vue | （三）使用Vue脚手架（中）| 尚硅谷Vue2.0+Vue3.0全套教程

文章目录 &#x1f4da;Todo-list 案例&#x1f407;组件化编码流程&#xff08;通用&#xff09;&#x1f407;实现静态组件&#x1f407;展示动态数据&#x1f407;交互⭐️添加一个todo⭐️todo勾选实现⭐️删除功能实现⭐️底部统计功能实现⭐️底部全选功能实现⭐️底部一…
阅读更多...
每日一练：前端js实现算法之两数之和

每日一练：前端js实现算法之两数之和

方法一&#xff1a;暴力法 function twoSum(nums, target) {for (let i 0; i < nums.length; i) {for (let j i 1; j < nums.length; j) {if (nums[i] nums[j] target) {return [i, j];}}}return null; }方法二&#xff1a;哈希表 function twoSum(nums, target) …
阅读更多...
函数——递归4（c++）

函数——递归4（c++）

正整数N转换成一个二进制数 题目描述 输入一个不大于 32767 的整数 n &#xff0c;将它转换成一个二进制数。 输入 输入只有一行&#xff0c;包括一个整数 n (0≤ n ≤32767)。 输出 输出只有一行。 样例 输入复制 100 输出复制 1100100 输入复制 0 输出复制…
阅读更多...
前端算法题——给定一个整数数组，判断是否存在重复元素。

前端算法题——给定一个整数数组，判断是否存在重复元素。

前言 题目可以理解为如果存在一值在数组中出现至少两次&#xff0c;函数返回 true 。如果数组中每个元素都不相同&#xff0c;则返回 false。 示例 1:输入: [1,2,3,1] 输出: true示例 2:输入: [1,2,3,4] 输出: false这题一看就是 计数问题&#xff0c;题目中“如果存在一值在…
阅读更多...
Docker从入门到上天系列第二篇：Docker与传统虚拟机对比

Docker从入门到上天系列第二篇：Docker与传统虚拟机对比

&#x1f609;&#x1f609; 欢迎加入我们的学习交流群呀&#xff01; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring、Security、Docker、Grpc、消息中间件、Rpc、SpringCloud等等很多应用和源码级…
阅读更多...
代码随想录算法训练营day17||二叉树part04、110.平衡二叉树 、257. 二叉树的所有路径 、404.左叶子之和

代码随想录算法训练营day17||二叉树part04、110.平衡二叉树 、257. 二叉树的所有路径 、404.左叶子之和

注意&#xff1a;迭代法&#xff0c;可以先过&#xff0c;二刷有精力的时候 再去掌握迭代法。 110.平衡二叉树 &#xff08;优先掌握递归&#xff09; 再一次涉及到&#xff0c;什么是高度&#xff0c;什么是深度&#xff0c;可以巩固一下。 题目&#xff1a;给定一个二叉树&am…
阅读更多...
为什么从没有负值的数据中绘制的小提琴图（Violin Plot）会出现负值部分？

为什么从没有负值的数据中绘制的小提琴图（Violin Plot）会出现负值部分？

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 小提琴图&#xff08;Violin Plot&#xff09; 是一种用于展示和比较数据分布的可视化工具。它结合了箱形图&#xff08;Box Plot&#xff09;和密度图&#xff08;Kernel Density Plot&#xff09;的特…
阅读更多...
电商数据API接口

电商数据API接口

1、将数据采集的整体成本降低55%。在电商API接口负责了整个数据采集流程后&#xff0c;这家电商公司成功节约了维护和开发上的成本。 2、电商爬虫API可以从极复杂的来源中采集数据&#xff0c;确保完整交付。在电商爬虫API的帮助下&#xff0c;该公司现在可以获取完成业务目标…
阅读更多...
最新文章

Copyright @ 2022~2023