前端【2】html添加样式、CSS选择器

一、为html添加样式的三种方法

1、内部样式

2、外部样式

3、行内样式

二、css的使用--css选择器

1、css基本选择器

元素选择器

属性选择器

id选择器

class/类选择器

通配符选择器 

2、群组选择器-多方面筛选

3、关系选择器

 后代选择器【包含选择器】

子元素选择器 

兄弟选择器

4、伪元素选择器

5、伪类选择器

结构性伪类选择器

UI 状态伪类选择器

 :not()排除选择器

​6、CSS选择器的优先级

往期文章：

前端基础---认识前端框架（html、css、js、）_前端代码结构-CSDN博客

前端【1】---HTML入门学习_html父子标签-CSDN博客

一、为html添加样式的三种方法

1、内部样式

        内部样式是将 CSS 代码直接写在 HTML 文件的 <style> 标签中，通常放在 <head> 部分，为多个组件添加同一样式

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>内部样式示例</title><!-- 内部样式 为多个组件添加同一样式--><style>h1 {color: blue;font-size: 24px;}p {color: green;font-size: 16px;}div{color: antiquewhite;background:purple;}</style>
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p><div>这是一个div块</div>
</body>
</html>

多个页面可以共享同一个 CSS 文件，减少代码冗余。

2、外部样式

        外部样式是将 CSS 代码写在一个单独的 .css 文件中，然后通过 <link> 标签将其引入到 HTML 文件中。常用，优先级最低

html文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>外部样式示例</title><!-- 引入外部样式文件 --><link rel="stylesheet" href="styles.css">
</head>
<body><h1>这是一个标题</h1><p>这是一个段落。</p>
</body>
</html>

 styles.css文件：

/* 外部样式 */
h1 {color: blue;font-size: 24px;
}
p {color: green;font-size: 16px;
}

3、行内样式

        行内样式是将 CSS 代码直接写在 HTML 元素的 style 属性中。行内样式优先级最高

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>行内样式示例</title>
</head>
<body><!-- 行内样式 --><h1 style="color: blue; font-size: 24px;">这是一个标题</h1><p style="color: green; font-size: 16px;">这是一个段落。</p>
</body>
</html>

二、css的使用--css选择器

1、css基本选择器

元素选择器

语法 : 标签名{} ，通过 HTML 标签名选择元素。

标签名 {属性: 值;
}
/* 选择所有 <p> 标签 */
p {color: red;font-size: 16px;
}

属性选择器

属性选择器一共有7种写法

某某[属性]

元素[属性] {样式;
}

 

某某[属性=属性值]

元素[属性="属性值"] {样式;
}

 某某[属性^=属性值]：选择属性值以指定值开头的元素。

某某[属性$=属性值]：选择属性值以指定值结尾的元素。

某某[属性*=属性值]：选择属性值包含指定值的元素。

某某[属性~=属性值]:选择属性值中包含指定单词的元素（单词以空格分隔）。

某某[属性|=属性值]:选择属性值以指定值开头或以指定值开头后跟连字符 - 的元素。

id选择器

通过元素的 id 属性选择元素，id 是唯一的，一个页面中只能有一个元素使用相同的 id。

#id名 {属性: 值;
}

示例： 

<p id="special">这是一个特殊的段落。</p>
/* 选择 id 为 special 的元素 */
#special {color: green;font-weight: bold;
}

class/类选择器

class 可以重复使用，一个元素可以有多个 class

.class名 {属性: 值;
}

示例： 

<p class="highlight">这是一个高亮段落。</p>
<p class="highlight">这是另一个高亮段落。</p>
/* 选择所有 class 为 highlight 的元素 */
.highlight {background-color: yellow;
}

通配符选择器 

语法 : *{}

作用 : 让页面中所有的标签执行该样式,通常用来清除间距

 *{margin: 0;  //外间距
padding: 0;  //内间距}

要是对某几个标签执行样式而非全部标签： 

/*选择器组合（满足一个条件即可） 选择器1，选择器2{} */
div,
p,
a,
.aa 
{background-color: aquamarine;
}

 

2、群组选择器-多方面筛选

通过逗号分隔多个选择器，同时为多个元素设置相同的样式

语法：

选择器1, 选择器2, 选择器3 {属性: 值;
}

示例：

/* 选择所有 h1、h2 和 p 元素 */
h1, h2, p {color: blue;
}
/* p标签里class属性为aa */
p.aa {color: #000;}

3、关系选择器

关系选择器 是 CSS 中用于根据元素之间的层级关系来选择元素的选择器。它们通过描述元素在文档结构中的位置关系（如父子关系、兄弟关系等）来实现精确的选择

 后代选择器【包含选择器】

选择某个元素的所有后代元素。（多层嵌套）

祖先元素 后代元素 {样式;
}

子元素选择器 

选择某个元素的直接子元素（仅一层嵌套）

父元素 > 子元素 {样式;
}

 

兄弟选择器

选择某个元素后面的所有兄弟元素，平级

元素1 ~ 元素2 {样式;
}

示例： 

 

/* 选择 .container 内直接子元素中 class 为 highlight 的 <p> 元素 */
.container > .highlight {font-weight: bold;
}

4、伪元素选择器

用于选择元素的特定部分（如首行、首字母等）

选择器::伪元素 {属性: 值;
}

常用伪元素：

  • ::before：在元素内容之前插入内容。

  • ::after：在元素内容之后插入内容。

  • ::first-line：选择元素的第一行。

  • ::first-letter：选择元素的第一个字母。

示例：

/* 一、首字母：：first-letter  只使用于能让元素竖着布局的标签*/
div::first-letter
{color:yellow;font-size: 40px;
}
/* 二、首行 对于英文需要自己加入空格分隔*/
div::first-line{color:yellow;font-size: 40px;}
/* 三、往前/后加东西  可以用来做一些特效*/
/* 如果不写文字用content:" " */
div::before {content: "新添加的内容";color: antiquewhite;background-color: aqua;}
div::after {content: "新添加的内容";color: antiquewhite;background-color: aqua;}

5、伪类选择器

伪类选择器 是 CSS 中用于选择元素特定状态或位置的选择器。它们以冒号（:）开头，用于匹配元素的某种状态（如鼠标悬停、焦点状态）或位置（如第一个子元素、第 n 个子元素）

<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul>

结构性伪类选择器

用于根据元素在文档结构中的位置选择元素。

:nth-child(n)：

  • 选择父元素下的第 n 个子元素,从前往后数。

  • n 可以是数字、表达式（如 2n+1）、关键字（odd 奇数，even 偶数）。

  • 注意：只认数字，如果类型不匹配，样式不会生效。

  • ul li:nth-child(odd) {color: blueviolet;
}

 :nth-last-child(n)：

  • 从后往前数，选择父元素下的第 n 个子元素。

  • 示例：

    ul li:nth-last-child(2) {color: blue;
}

  • :first-child：选择父元素下的第一个子元素。

  • :last-child：选择父元素下的最后一个子元素。

  • 示例

    ul li:first-child {color: red;
}
ul li:last-child {color: green;
}

:nth-of-type(n)：

  • 选择父元素下同类型的第 n 个子元素。

  • 既认数字又认类型。

  • 示例：

    ul li:nth-of-type(2) {color: blueviolet;
}

  • :first-of-type 和 :last-of-type：

    • :first-of-type：选择父元素下同类型的第一个子元素。

    • :last-of-type：选择父元素下同类型的最后一个子元素。

    • 示例

      ul li:first-of-type {color: red;
}
ul li:last-of-type {color: green;
}

UI 状态伪类选择器

用于根据元素的状态选择元素。

:hover

  • 选择鼠标悬停在元素上时的状态
  • 示例：当鼠标悬停在按钮上时，按钮背景颜色变为黄色。
/* 鼠标悬停时改变背景颜色 */
button:hover {background-color: yellow;
}

【拓展】 /* tramsition过度动画（不会突然变成某样式） */

 li{transition: all,2s,linear;}li:hover{color: aquamarine;}

  • transition 是 CSS 中用于定义过渡效果的属性。

  • all：表示所有属性都会应用过渡效果（如颜色、背景、大小等）。

  • 2s：表示过渡效果的持续时间为 2 秒。

  • linear：表示过渡效果的时间函数为线性（匀速）。

作用：

  • 当 <li> 元素的任何属性发生变化时，会以匀速的方式在 2 秒内完成过渡。

:active

  • 选择元素被激活（如鼠标点击）时的状态。
  • 示例：当用户点击按钮时，按钮背景颜色变为红色
/* 点击时改变按钮颜色 */
button:active {background-color: red;
}

:focus

  • 选择元素获得焦点时的状态（如表单输入框）
  • 示例：当用户点击输入框时，输入框的边框颜色变为蓝色
/* 输入框获得焦点时改变边框颜色 */
input:focus {border-color: blue;
}

:checked

  • 选择被选中的单选框或多选框
  • 示例：当用户选中单选框时，单选框的背景颜色变为绿色
/* 选中时改变单选框的背景颜色 */
input[type="radio"]:checked {background-color: green;
}
  • 示例：为被选中的单选框或多选框添加一个金色的阴影效果
input:checked{box-shadow: 2px 2px 2px gold;/* 加阴影---水平方向偏移量，竖直方向偏移量，模糊度，颜色 */
}

 :not()排除选择器

用于选择 不满足指定条件 的元素

元素:not(选择器) {样式;
}

  • 元素：可以是任何 HTML 元素（如 div、p、li 等）。

  • 选择器：可以是任何有效的 CSS 选择器（如类选择器 .class、ID 选择器 #id、属性选择器 [attr] 等）。

 6、CSS选择器的优先级

选择器写的越长（越准确），优先级越高【特异性越高，优先级越高】

 ID 选择器 > 类选择器 > 元素选择器

同级别长度下，CSS 按照代码顺序执行，同一样式后边的会把前面的覆盖掉，不同样式会叠加

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

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

相关文章

【Elasticsearch】全文搜索与相关性排序

【Elasticsearch】全文搜索与相关性排序

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…
阅读更多...
【算法】枚举

【算法】枚举

枚举 普通枚举1.铺地毯2.回文日期3.扫雷 二进制枚举1.子集2.费解的开关3.Even Parity 顾名思义&#xff0c;就是把所有情况全都罗列出来&#xff0c;然后找出符合题目要求的那一个。因此&#xff0c;枚举是一种纯暴力的算法。一般情况下&#xff0c;枚举策略都是会超时的。此时…
阅读更多...
51单片机——DS18B20温度传感器

51单片机——DS18B20温度传感器

由于DS18B20数字温度传感器是单总线接口&#xff0c;所以需要使用51单片机的一个IO口模拟单总线时序与DS18B20通信&#xff0c;将检测的环境温度读取出来 1、DS18B20模块电路 传感器接口的单总线管脚接至单片机P3.7IO口上 2、DS18B20介绍 2.1 DS18B20外观实物图 管脚1为GN…
阅读更多...
云手机技术怎么实现的？

云手机技术怎么实现的？

前言 随着亚矩阵云手机在跨境电商、海外社媒矩阵搭建、出海运营、海外广告投放、国内新媒体矩阵运营、品牌应用矩阵运营等领域内的普及和使用&#xff0c;云手机的理念已经被越来越多人所接受和认同。今天我们就一起来浅析一下&#xff0c;到底云手机的技术是怎么实现的&#…
阅读更多...
HTML中link的用法

HTML中link的用法

一点寒芒先到&#xff0c;随后&#xff0c;抢出如龙&#xff01; 对于本人而言&#xff0c;这篇笔记内容有些扩展了&#xff0c;有些还未学到的也用上了&#xff0c;但是大概可以使用的明白&#xff0c;坚持下去&#xff0c;相信一定可以建设一个稳固的根基。 该文章为个人成…
阅读更多...
闪豆多平台视频批量下载器

闪豆多平台视频批量下载器

1. 视频链接获取与解析 首先&#xff0c;在哔哩哔哩网页中随意点击一个视频&#xff0c;比如你最近迷上了一个UP主的美食制作视频&#xff0c;想要下载下来慢慢学。点击视频后&#xff0c;复制视频页面的链接。复制完成后&#xff0c;不要急着关闭浏览器&#xff0c;因为接下来…
阅读更多...
Vulnhub DC-8靶机攻击实战(一)

Vulnhub DC-8靶机攻击实战(一)

导语   Vulnhub DC-8靶机教程来了，好久没有更新打靶的教程了，这次我们在来更新一期关于Vulnhub DC-8的打靶训练，如下所示。 安装并且启动靶机 安装并且启动靶机，如下所示。 开始信息采集 进入到Kali中，通过如下的命令来查找到靶机的IP地址。 arp-scan -l根据上面的结…
阅读更多...
JWT在线解密/解码 - 加菲工具

JWT在线解密/解码 - 加菲工具

JWT在线解密/解码 首先进入加菲工具 选择 “JWT 在线解密/解码” https://www.orcc.online 或者直接进入JWT 在线解密/解码 https://www.orcc.online/tools/jwt 进入功能页面 使用 输入对应的jwt内容&#xff0c;点击解码按钮即可
阅读更多...
换了城市ip属地会变吗？为什么换了城市IP属地不变

换了城市ip属地会变吗？为什么换了城市IP属地不变

当我们跨越城市的界限&#xff0c;从一个地方迁移到另一个地方时&#xff0c;许多日常使用的网络服务和应用程序都会感知到这种变化&#xff0c;其中一个显著的现象就是IP属地的变化。IP属地&#xff0c;即IP地址所在的地理位置信息&#xff0c;它通常与互联网服务提供商&#…
阅读更多...
如何在谷歌浏览器中设置自定义安全警告

如何在谷歌浏览器中设置自定义安全警告

随着网络环境的日益复杂&#xff0c;浏览器的安全问题也愈发引人关注。谷歌浏览器作为一款广泛使用的浏览器&#xff0c;其自定义安全警告功能为用户提供了更加个性化和安全的浏览体验。本文将详细介绍如何在谷歌浏览器中设置自定义安全警告&#xff0c;帮助用户更好地保护自己…
阅读更多...
深度学习中的卷积和反卷积（四）——卷积和反卷积的梯度

深度学习中的卷积和反卷积（四）——卷积和反卷积的梯度

本系列已完结&#xff0c;全部文章地址为&#xff1a; 深度学习中的卷积和反卷积&#xff08;一&#xff09;——卷积的介绍 深度学习中的卷积和反卷积&#xff08;二&#xff09;——反卷积的介绍 深度学习中的卷积和反卷积&#xff08;三&#xff09;——卷积和反卷积的计算 …
阅读更多...
Mongodb相关内容

Mongodb相关内容

Mongodb相关内容 1、Windows平台安装2、Linux平台安装3、基本常用命令文档更新删除文档分页查询索引 pymongo操作 客户端下载&#xff1a;https://download.csdn.net/download/guoqingru0311/90273435 1、Windows平台安装 方式一&#xff1a; 方式2&#xff1a; 方式3&#…
阅读更多...
RabbitMQ前置概念

RabbitMQ前置概念

文章目录 1.AMQP协议是什么&#xff1f;2.rabbitmq端口介绍3.消息队列的作用和使用场景4.rabbitmq工作原理5.整体架构核心概念6.使用7.消费者消息推送限制&#xff08;work模型&#xff09;8.fanout交换机9.Direct交换机10.Topic交换机&#xff08;推荐&#xff09;11.声明队列…
阅读更多...
[Mac + Icarus Verilog + gtkwave] Mac运行Verilog及查看波形图

[Mac + Icarus Verilog + gtkwave] Mac运行Verilog及查看波形图

目录 1. MAC安装环境 1. 1 Icarus Verilog 编译 1. 2 gtkwave 查看波形 2. 安装遇到的问题 2. 1 macOS cannot verify that this app is free from malware 2. 2 gtkwave-bin is not compatible with macOS 14 or later 3. 运行示例 3. 1 源代码 3. 2 编译Verilog 3. 3 生成.v…
阅读更多...
kalilinux - 目录扫描之dirsearch

kalilinux - 目录扫描之dirsearch

情景导入 先简单介绍一下dirsearch有啥用。 假如你现在访问一个网站&#xff0c;例如https://www.example.com/ 它是一个电商平台或者其他功能性质的平台。 站在开发者的角度上思考&#xff0c;我们只指导https://www.example.com/ 但不知道它下面有什么文件&#xff0c;文…
阅读更多...
如何制作符合自己设备的FLM下载算法

如何制作符合自己设备的FLM下载算法

如何制作符合自己设备的FLM下载算法 --------以I.MXRT1062 QSPI FLAH为例&#xff08;串行qspi nor flash&#xff09; 本文介绍一种基于i.mxrt1062的外挂flah的qspi nor flash下载算法FLM的一种方法&#xff0c;Flash 编程算法是一种用于擦除或下载应用程序到 Flash 设备的软…
阅读更多...
LLMs之RAG：《EdgeRAG: Online-Indexed RAG for Edge Devices》翻译与解读

LLMs之RAG：《EdgeRAG: Online-Indexed RAG for Edge Devices》翻译与解读

LLMs之RAG&#xff1a;《EdgeRAG: Online-Indexed RAG for Edge Devices》翻译与解读 导读&#xff1a;这篇论文针对在资源受限的边缘设备上部署检索增强生成 (RAG) 系统的挑战&#xff0c;提出了一种名为 EdgeRAG 的高效方法。EdgeRAG 通过巧妙地结合预计算、在线生成和缓存策…
阅读更多...
基于Java的百度AOI数据解析与转换的实现方法

基于Java的百度AOI数据解析与转换的实现方法

目录 前言 一、AOI数据结构简介 1、官网的实例接口 2、响应参数介绍 二、Java对AOI数据的解析 1、数据解析流程图 2、数据解析实现 3、AOI数据解析成果 三、总结 前言 在当今信息化社会&#xff0c;地理信息数据在城市规划、交通管理、商业选址等领域扮演着越来越重要的…
阅读更多...
【C++】构造函数与析构函数

【C++】构造函数与析构函数

写在前面 构造函数与析构函数都是属于类的默认成员函数&#xff01; 默认成员函数是程序猿不显示声明定义&#xff0c;编译器会中生成。 构造函数和析构函数的知识需要建立在有初步类与对象的基础之上的&#xff0c;关于类与对象不才在前面笔记中有详细的介绍&#xff1a;点我…
阅读更多...
2013年IMO几何预选题第4题

2013年IMO几何预选题第4题

在 △ A B C \triangle ABC △ABC 中, A B < A C AB < AC AB<AC. P P P, Q Q Q 是直线 A C AC AC 上的两个不同的点, 满足 ∠ P B A ∠ Q B A ∠ A C B \angle PBA \angle QBA \angle ACB ∠PBA∠QBA∠ACB, 且 A A A 在 P P P 与 C C C 之间. 已知在线段…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023