21.0 CSS 介绍
1. CSS层叠样式表
1.1 CSS简介
CSS(层叠样式表): 是一种用于描述网页上元素外观和布局的样式标记语言.
它可以与HTML结合使用, 通过为HTML元素添加样式来改变其外观.
CSS使用选择器来选择需要应用样式的元素, 并使用属性-值对来定义这些样式.
1.2 CSS版本
CSS有多个版本, 每个版本都有不同的功能和语法规则.以下是一些常见的CSS版本:
* 1. CSS1: 1996年发布的第一个CSS版本, 引入了基本的样式规则和属性, 如颜色, 字体, 背景和边框.* 2. CSS2: 1998年发布的第二个CSS版本, 引入了更多的布局和定位属性, 例如浮动, 定位和相对定位.* 3. CSS3: 从2001年开始陆续发布的一系列模块化CSS规范, 引入了许多新的功能, 如阴影, 渐变, 过渡, 动画和多列布局.* 4. CSS4: 目前尚未正式发布的版本, 但一些新功能已经出现在一些浏览器中.CSS4计划引入更多的模块化规范, 如网格布局, 弹性盒子和更多的选择器.除了这些主要版本外, 还有一些CSS扩展和前缀版本, 如-webkit, -moz和-ms, 用于适应不同的浏览器和厂商特定的功能.总的来说, 选择使用哪个CSS版本取决于项目需求和目标浏览器的支持情况.
新的CSS版本通常引入了更多的功能和灵活性, 但也需要考虑到浏览器兼容性问题.
1.3 CSS语法结构
CSS语法结构由:
* 1. 选择器(Selector): 选择器用于选择需要应用样式的HTML元素. 可以使用标签名, 类名, ID, 属性等来定义选择器. 例如:- 标签选择器: p {} --> (选择所有<p>元素).- 类选择器: .myClass {} --> (选择具有class为myClass的元素).- ID选择器： #myId {} --> (选择具有id为myId的元素).- 属性选择器: [name="value"] {} --> (选择具有指定属性和值的元素).* 2. 声明块(declaration block): 它由一系列的属性和值构成, 用于指定元素的样式.声明块位于选择器后面, 用花括号 {} 括起来.* 2. 属性: 属性是要修改的元素的特征或样式.常见的属性包括color, font-size, background-color, margin, padding等.* 3. 值:值定义了属性的具体表现形式.例如, color: blue; 中的值是blue, font-size: 16px; 中的值是16px.CSS规则可以包含多个属性-值对, 每个属性-值对以分号分隔. 最后一个属性-值对后面可以选择性地加上分号.
下面是CSS规则的基本结构:
选择器 {属性1: 值1;属性2: 值2;...
}
1.4 CSS引入方式
CSS可以通过多种方式引入到HTML文档中.
以下是几种常见的CSS引入方式:* 1. 内联样式(Inline Styles): 使用style属性在HTML元素中直接定义样式. 内联样式将应用于单个HTML元素, 优先级最高(临时使用, 不推荐). * 2. 内部样式表(Internal Style Sheet): 将CSS样式直接写在HTML文档的<head>标签中的<style>标签中.内部样式表适用于单个HTML文档, 优先级高于外部样式表, 但低于内联样式(临时使用).* 3. 外部样式表{External Style Sheet): 将CSS样式放入一个独立的外部文件(通常以.css扩展名保存), 然后使用<link>标签将其引入到HTML文档中(最正规的方式, 解耦合).外部样式表可以在多个HTML文档中共享, 并且使HTML文件更清晰和易于维护. 如果多个元素需要相同的样式, 建议使用外部样式表.
1.4.1 内联样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Inline Styles</title>
</head>
<body>
<!-- 文字颜色: 蓝色, 字体大小: 16像素. -->
<p style="color: blue; font-size: 16px;">This is a paragraph.</p> .
</body>
</html>
1.4.2 内部样式表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Internal Style Sheet</title><style>p {color: blue; font-size: 16px;}</style>
</head><body>
<p>This is a paragraph.</p>
</body>
</html>
1.4.3 外部样式表
/* styles.css */
p {color: blue; font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>External Style Sheet</title><link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
2. CSS注释语法
注释: 用来解释和说明代码的作用和用法, 为开发者提供参考, 使得代码更易于理解和维护.
在CSS代码中添加注释, 以便说明和解释代码的目的, 它们不会在浏览器中显示出来, 也不会对页面的显示产生任何影响.CSS注释以 /* 开头, 以 */ 结尾. 注释之间的内容会被完全忽略, 不会对页面样式产生影响.
CSS注释的语法:
/* 单行注释 */ /*
多行注释1
多行注释2
/*
通常也会使用注释划定css样式区域.
/* 博客园首页的css样式文件 */
/* 顶部导航条样式 */
···
/* 左侧菜单栏样式*/
···
/* 右侧菜单栏样式 */
···
3. 选择器介绍
要为HTML标签设置样式, 需要通过选择器来匹配标签, 并在选择器的后面设置相应的样式.* CSS样式具有继承性: 当给一个元素设置样式时, 该样式会向下传递给其子元素, 除非子元素有自己的样式来覆盖.
3.1 基本选择器
基本选择器是用于在HTML和CSS中选择特定元素的方法.
以下是四种常见的基本选择器:
* 1. 标签选择器(Tag selector): 使用HTML标签名称作为选择器来选择所有具有相同标签名称的元素.* 2. id选择器(ID selector): 使用元素的id属性来唯一标识一个元素, 并使用该id作为选择器.id选择器在HTML文档中应该是唯一的. * 3. 类选择器(Class selector): 使用元素的class属性来选择具有相同类名的元素, 并使用该类名作为选择器.类选择器可以用于选择一个或多个元素. * 4. 通用选择器(Universal selector): 使用*作为选择器, 它可以匹配所有的元素.通配选择器可以用来选择文档中的所有元素.
3.1.1 标签选择器
标签选择器格式:
标签名称 {属性: 值;···
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Label selector</title><style>h1 {color: red; /* 设置标签的文字的颜色 */}h3 {color: aqua;}</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者:于谦</h6>
<h3>千锤万凿出深山, 烈火焚烧若等闲.</h3>
<h3>粉骨碎身浑不怕, 要留清白在人间.</h3>
</body>
</html>
3.1.2 id选择器
id选择器格式:
#id {属性: 值;...
}注意事项:
* 1. 在CSS中使用id选择器时, 要在id值前面加上#号.例如, 使用#myId作为选择器来选择具有id为'myId'的元素.
* 2. 在HTML文档中, 每个元素的id属性值应该是唯一的.不同元素之间不能有相同的id值.
* 3. id值只能由字母, 数字和下划线组成, 不能以数字开头, 且不能与HTML标签名重名.推荐使用有意义的, 描述性的id值, 以便在代码维护和调试过程中更容易理解和使用.
* 4. 在HTML中, 除了用于CSS选择器外, id属性还经常用于JavaScript操作.JavaScript可以通过id值来获取特定的元素, 并对其进行操作. 因此, id值在前端开发中具有重要的作用.
* 总之, 在使用id选择器时, 要确保id值的唯一性, 合理命名id, 并遵循CSS和HTML的语法规则, 以避免潜在的冲突和问题.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Id selector</title><style>#d1 {color: red; /* 设置标签的文字的颜色 */}#d2 {color: aqua;}</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者:于谦</h6>
<h3 id="d1">千锤万凿出深山, 烈火焚烧若等闲.</h3>
<h3 id="d2">粉骨碎身浑不怕, 要留清白在人间.</h3>
</body>
</html>
3.1.3 类选择器
类选择器格式:
.类名 {属性: 值;...
}注意事项:
* 1. 通用选择器使用"*"通配符来表示, 它可以选择当前HTML页面中的所有标签.
* 2. 当使用通用选择器时, 会遍历所有标签并应用相应的属性, 这可能会导致性能降低, 特别是在标签较多的情况下.因此, 在实际开发中, 开发者通常不会过度使用通用选择器.
* 3. 通用选择器适用于一些简单的全局样式设置, 但在应用复杂样式或涉及性能优化的情况下, 我们通常会使用其他更具针对性的选择器.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Class selector</title><style>.c1 {color: red; /* 设置标签的文字的颜色 */}.c2 {color: aqua;}.typeface {font-family: '楷体'; /* 设置标签的文字的字体 */}</style>
</head>
<body>
<h1>石灰吟</h1>
<h6 class="c1">作者:于谦</h6>
<h3 class="c2 typeface">千锤万凿出深山, 烈火焚烧若等闲.</h3>
<h3>粉骨碎身浑不怕, 要留清白在人间.</h3>
</body>
</html>
3.1.4 通用选择器
通用选择器格式:
* {属性: 值;...
}注意事项:
* 1. 通用选择器使用"*"通配符来表示, 它可以选择当前HTML页面中的所有标签.
* 2. 当使用通用选择器时, 会遍历所有标签并应用相应的属性, 这可能会导致性能降低, 特别是在标签较多的情况下.因此, 在实际开发中, 开发者通常不会过度使用通用选择器.
* 3. 通用选择器适用于一些简单的全局样式设置, 但在应用复杂样式或涉及性能优化的情况下, 我们通常会使用其他更具针对性的选择器.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Universal selectors</title><style>* {color: red; /* 设置标签的文字的字体 */}</style>
</head>
<body>
<h1>石灰吟</h1>
<h6>作者:于谦</h6>
<h3>千锤万凿出深山, 烈火焚烧若等闲.</h3>
<h3>粉骨碎身浑不怕, 要留清白在人间.</h3>
</body>
</html>
3.2 组合选择器
在前端中, 使用亲戚关系来描述标签的嵌套层级.以下是关于这些亲戚关系的定义:
* 1. 后代选择器(Descendant Selector): 使用空格来表示. 它选取某个元素的后代元素, 不论层级有多深.例如, 'div p'选择所有在'<div>'元素内部的'<p>'元素.* 2. 儿子选择器(Child Selector): 使用'>'符号来表示. 它选取某个元素的直接子元素.例如, 'ul > li'选择'<ul>'元素下的所有直接子'<li>'元素.* 3. 毗邻选择器(Adjacent Sibling Selector): 使用'+'符号来表示. 它选取某个元素之后紧邻的同级元素.例如, 'h2 + p'选择紧邻'<h2>'元素后面的第一个'<p>'元素.* 4. 弟弟选择器(General Sibling Selector): 使用'~'符号来表示. 它选取某个元素之后所有的同级元素.例如, 'h2 ~ p'选择所有在'<h2>'元素之后的同级'<p>'元素.使用这些关系符号, 你可以准确描述标签之间的嵌套层级关系, 并根据需要选择特定的元素进行操作.
3.2.1 后代选择器
后代选择器格式:
标签名称 #id .类名 {属性: 值;...
}注意事项:
* 1. 默认情况下, 后代选择器会选择所有后代标签, 包括了儿子标签(child tags), 孙子标签(grandchild tags)等等.
* 2. 后代选择器使用空格进行分隔.
* 3. 标签名称, ID, 类名可以进行任意组合.
* 4. 顺序是从左到右: 标签名称 > ID > 类名.例如:
- 'div p' 选择所有'<p>'元素, 其父元素是'<div>'.
- 'div .className'选择所有具有'className'类名的元素, 其父元素是'<div>'.
- 'div #myId .myClass'选择所有同时具有'id'为'myId'和类名为'myClass'的元素. 其父元素是'<div>'.
3.2.1.1 标签组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(Label combination)</title><style>ul li p {color: red;}body p {font-size: 30px;}</style>
</head>
<body>
<p>段落一</p><p>段落二</p><ul><li><p>段落三</p></li>
</ul>
</body>
</html>
3.2.1.2 ID组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(ID combination)</title><style>#d1 #d2 {color: #04ff00;}#d11 #d12 #d13 {color: red;}</style>
</head>
<body>
<p>段落一</p><ul id="d1"><li id="d2"><p>段落二</p></li>
</ul><ul id="d11"><li id="d12"><p id="d13">段落三</p></li>
</ul>
</body>
</html>
3.2.1.3 类名组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(Class combination)</title><style>.c1 .c2 .c3 {color: red;}</style>
</head>
<body><p>段落一</p><p>段落二</p><ul class="c1"><li class="c2"><p class="c3">段落三</p></li></ul></body>
</html>
3.2.1.4 任意组合
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(Any combination)</title><style>ul #d1 .c1 {color: red;}</style>
</head>
<body><p>段落一</p><ul><li id="d1"><p class="c1">段落二</p></li></ul></body>
</html>
3.2.2 儿子选择器
儿子选择器格式:
父标签 > 儿子标签{属性: 值;...
}注意事项:
* 1. 子元素之间需要使用">"符号进行分隔.
* 2. 选择器可以是标签名称, ID, 类名的任意组合.例子:
-'div > p'选择所有父元素为'<div>'的直接子元素为'<p>'的元素.
-'ul > li'选择所有父元素为'<ul>'的直接子元素为'<li>'的元素.
-'.parentClass > .childClass'选择所有父元素具有'parentClass'类名, 且子元素具有'childClass'类名的元素.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(Child Selector)</title><style>ul > li > p {color: red;}body > p {font-size: 30px;}</style>
</head>
<body>
<p>段落一</p>
<ul><li><p>段落二</p></li><li><p>段落三</p></li>
</ul>
<p>段落四</p>
</body>
</html>
3.2.3 毗邻选择器
毗邻选择器(相邻兄弟选择器)格式:
标签+标签 {属性: 值;...
}注意事项:
* 1. 选择器顺序问题: CSS样式的应用是按照选择器的顺序来确定的.因此, 在应用样式时, 要确保通用兄弟选择器(~)出现在选中的标签之后.
* 2. 选择器可以是标签名称, ID, 类名的任意组合.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(Adjacent sibling selector)</title><style>h1 + p {color: red;}</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
3.2.4 弟弟选择器
弟弟选择器格式:
标签 ~ 标签 { /* 指定的弟弟 */属性: 值; ...
}标签 ~ * { /* 所有的弟弟 */属性: 值; ...
}注意事项:
* 1. 选择器顺序问题: CSS样式的应用是按照选择器的顺序来确定的.因此, 在应用样式时, 要确保通用兄弟选择器(~)出现在选中的标签之后.
* 2. 选择器可以是标签名称, ID, 类名的任意组合.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(General Sibling Selector 1)</title><style>h1 ~ p { /* 指定 弟弟p标签 */color: red;}</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
<!-- strong标签被排除 -->
<strong>xxx</strong>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Descendant Selector(General Sibling Selector 2)</title><style>h1 ~ * { /* 指定 所有弟弟标签 */color: red;}</style>
</head>
<body>
<h1>标题</h1>
<p>第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
<!-- strong标签被包含 -->
<strong>xxx</strong>
</body>
</html>
3.3 集合选择器
集合选择器(set selector): 用于选择特定元素集合的一种方式.以下是关于集合选择器的定义:
* 1. 交集选择器(Intersection Selector): 用于选择出同时满足多个选择器要求的元素.* 2. 并集选择器(Union Selector): 用于将多个选择器组合在一起, 以选择所有满足其中任一选择器的元素. 使用逗号(,)将多个选择器分隔开.
3.3.1 交集选择器
交集选择器格式:
选择器1选择器2 { /* 连写 */属性:值;...
}注意事项:
* 1.使用逗号(,)将多个选择器分隔开.
* 2. 选择器可以是标签名称, ID, 类名的任意组合.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Intersection Selector</title><style>p.c1 {color: red;}.c1#d1 {color: aqua;}</style>
</head>
<body>
<h1 class="c1" id="d1">标题</h1>
<p>第一段落</p>
<p class="c1">第二段落</p>
<p>第三段落</p>
<p class="c1">第四段落</p>
<p>第五段落</p>
</body>
</html>
3.3.2 并集选择器
并集选择器格式:
选择器1, 选择器2 {属性: 值;...
}注意事项:
* 1.使用逗号(,)将多个选择器分隔开.
* 2. 选择器可以是标签名称, ID, 类名的任意组合.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Union Selector</title><style>.c1, .c2 {color: red;}</style>
</head>
<body>
<h1 class="c1">标题</h1>
<p class="c2">第一段落</p>
<p>第二段落</p>
<p>第三段落</p>
</body>
</html>
3.4 序列选择器
序列选择器: 用于选择同一父元素下的一组元素中的特定位置的元素.
序列选择器按照元素在其父元素中的位置进行选择, 可以实现对元素的精确控制和样式化.
需要注意的是, 序列选择器中的索引值是从1开始的, 而不是从0开始.元素类型: 是指HTML中的元素标签名称, 例如<p>, <div>, <span>等.
每个元素都有一个特定的元素类型.以下是关于序列选择器的定义:
* 1. 不同类型序列选择器: 从不同类型的序列中选择一个序列(不区分元素的类型, 对所有的标签进行排序).它不区分序列的类型, 可以从任何类型的序列中选择, 无论是数字序列, 文字序列还是其他类型的序列.* 2. 同类型序列选择器: 从序列中选择一个序列, 但是它区分序列的类型(排序仅对指定的元素类型进行排序).例如, 如果你希望从多个文本序列中选择一个文本序列, 或者从多个数值序列中选择一个数值序列, 你可以使用这个选择器.它只会在相同类型的序列中进行选择.区别:
不同类型序列选择器是基于同类型元素中的位置进行选择, 需要考虑元素类型.
同类型序列选择器是基于所有子元素中的位置进行选择, 而不考虑元素类型.
3.4.1 不同类型序选择器
注意事项:
* 1. 选择器使用冒号:分隔.
* 2. 冒号前面的标签需要和序号同时满足才生效.
* 3. 不区分类型, 所有统计元素统一排序.
其父元素的第一个子元素 --> 标签:first-child {属性:值; ...}
其父元素的最后一个子元素 --> 标签:last-child {属性:值; ...}
其父元素的第n个标签 --> 标签:nth-child(n) {属性:值; ...}
其父元素的倒数第n个标签 --> 标签:nth-last-child(n) {属性:值; ...}
父元素中只存在唯一一个标签 --> 标签:only-child {属性:值; ...}
父元素中所有奇数标签 --> 标签:nth-child(odd) {属性:值; ...}
父元素中所有偶数标签 --> 标签:nth-child(even) {属性:值; ...}
公式条件: --> 标签:nth-child(xn+y) {属性:值; ...} x 与 y 为自定义数字, n为数字从0开始递增.
2n+0 2*0+0 = 0 2n+1 2*0+1 = 1
2n+0 2*1+0 = 2 2n+1 2*1+1 = 3
3.4.1.1 序选择器
p标签直接写在body标签下, 使用last-child不行, 写在一个div标签内测试.div标签是HTML中用来标记文档中的一个区块(块级元素)的标签.
它通常用于创建一个独立的容器, 用于包裹其他HTML元素, 比如文本, 图像, 表格, 表单等.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sequence Selector</title><style>p:first-child { /*其父元素的第一一个子元素*/color: red;}p:last-child { /* 需要嵌套在div标签内才能生效*/color: gold;}p:nth-child(2) { /*其父元素的第n个标签*/color: greenyellow;}strong:nth-last-child(4) { /*其父元素的倒数第n个标签*/color: aqua;}</style>
</head>
<body>
<div><p>p1</p><p>p2</p><p>p3</p><strong>s1</strong><p>p4</p><p>p5</p><p>p6</p>
</div></body>
</html>
3.4.1.2 唯一选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Unique Selector</title><style>p:only-child {color: red;}</style>
</head>
<body>
<p>段落一</p>
<ul><li><p>段落二</p> <!-- 用于选择父元素中仅包含一个子元素的 <p> 元素. --></li>
</ul>
</body>
</html>
3.4.1.3 奇偶选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Parity Selector 1</title><style>p:nth-child(odd) {color: red;}p:nth-child(even) {color: blue;}</style>
</head>
<body>
<div><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p><strong>s1</strong><strong>s2</strong>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Parity Selector 2</title><style>p:nth-child(2n+1) {color: red;}</style>
</head>
<body>
<div><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><p>p6</p>
</div>
</body>
</html>
3.4.2 同类型序列选择器
注意事项:
* 1. 择器使用冒号:分隔.
* 2. 冒号前面的标签需要和序号同时满足才生效.
* 3. 区分类型, 对同一类型的元素单独排序.
其父元素下同级同类型的第一个标签 --> 标签:first-fo-tyoe {属性:值;}
其父元素下同级同类型的最后一个标签 --> 标签:last-fo-tyoe {属性:值;}
其父元素下同级同类型的第n个标签 --> 标签:nth-fo-type(n) {属性:值;}
其父元素下同级同类型的倒数第n个标签 --> 标签:nth-last-fo-type(n) {属性:值;}
父元素中同类型标签只存在一个标签 --> only-of-type {属性:值;}
3.4.2.1 序列选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Sequence Selector(Same type)</title><style>p:first-of-type { /*其父元素下同级同类型的第一个标签*/color: red;}p:last-of-type { /*其父元素下同级同类型的最后一个标签*/color: #ffaa00;}p:nth-of-type(2) { /*其父元素下同级同类型的第n个标签*/color: #04ff00;}p:nth-last-of-type(2) { /*其父元素下同级同类型的倒数第n个标签*/color: blue;}</style>
</head>
<body>
<div><span>s1</span><p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p><strong>s2</strong><p>p6</p>
</div>
</body>
</html>
3.4.2.2 唯一选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Unique Selector(Same type)</title><style>p:only-of-type {color: red;}</style>
</head>
<body>
<p>段落一</p>
<ul><li><p>段落二</p></li>
</ul>
</body>
</html>
3.5 属性选择器
属性选择器: 选择拥有特定属性的元素.下面是两种常见的属性选择器:
* 1. 只匹配属性.- [attribute]:选择具有指定属性的元素。例如, [class]可以匹配所有具有'class'属性的元素.* 2. 匹配属性与值.- '[attribute=value]': 选择具有指定属性和值的元素.例如, '[class="example"]': 可以匹配所有'class'属性值为'example'的元素.- '[attribute^=value]': 选择具有以指定值开头的属性值的元素.例如, '[href^="https"]': 可以匹配所有'href'属性值以'https'开头的元素.- '[attribute$=value]': 选择具有以指定值结尾的属性值的元素.例如, '[src$=".png"]': 可以匹配所有'src'属性值以'.png'结尾的元素.- '[attribute*=value]': 选择具有包含指定值的属性值的元素.例如, '[title*="example"]': 可以匹配所有'title'属性值包含'example'的元素.
3.5.1 只匹配属性
只匹配属性格式:
标签 [属性] {属性: 值;...
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attribute Selector</title><style>p[id] {color: red;}</style>
</head>
<body>
<p id="d1">1</p>
<p>2</p>
<p id="d2">3</p>
<p>4</p>
<p id="d3">5</p>
</body>
</html>
3.5.2 匹配属性与值
匹配属性与值格式:
标签 [属性=值] {属性: 值;...
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attribute Value Selector 1</title><style>p[class=c1] {color: red;}</style>
</head>
<body>
<p class="c1">1</p>
<p>2</p>
<p class="c1">3</p>
<p>4</p>
<p class="c2">5</p>
</body>
</html>
3.5.3 属性以什么开头
属性以什么开头格式:
标签 [attribute^=value] {属性: 值;...
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attribute Value Selector 2</title><style>img[alt^=abc] {color: red;}/* css2格式 */img[alt|=abc] {font-size: 30px;}</style>
</head>
<body>
<img src="" alt="abc-1"> <!--符合-->
<img src="" alt="abc2"> <!--符合-->
<img src="" alt="abc 3"> <!--符合-->
<img src="" alt="xxx">
</body>
</html>
3.5.4 属性以什么结尾
属性以什么结尾格式:
标签 [attribute$=value] {属性: 值;...
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attribute Value Selector 3</title><style>img[alt$=a] {color: red;}</style>
</head>
<body>
<img src="" alt="1-a"> <!--符合-->
<img src="" alt="2 a"> <!--符合-->
<img src="" alt="3a"> <!--符合-->
<img src="" alt="xa"> <!--符合-->
<img src="" alt="xx">
</body>
</html>
3.5.5 属性值包含某个值
属性值包含某个值格式:
标签 [属性*=值] {属性: 值;...
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Attribute Value Selector 4</title><style>img[alt*=abc] {color: red;}/* css2格式 */img[alt~=abc] {font-size: 30px;}</style>
</head>
<body><img src="" alt="qqq abc xxx"> <!--符合--><img src="" alt="www-abc-xxx"> <!--符合--><img src="" alt="abcdef"> <!--符合--><img src="" alt="qqqabc"> <!--符合--><img src="" alt="xxxxx">
</body>
</html>
3.6 伪类选择器
伪类选择器(Pseudo Class Selector): 用于根据元素的不同状态来设置样式.下面是对每个选择器的简要说明:
* 1. :link: 表示未访问的链接样式.当链接没有被点击过时生效, 在浏览器调整后会恢复默认样式.* 2. :hover: 表示鼠标悬停在元素上时的样式.通常用于创建一些交互效果, 比如改变背景色或显示其他元素.* 3. :active: 表示元素被点击时的样式.通常用于按钮或链接等可点击的元素, 在元素被按下时生效.* 4. :visited: 表示已访问的链接样式.当链接被点击过后生效, 可以用来区分已点击和未点击链接.* 5. :focus: 表示元素获取焦点时的样式.通常用于表单元素, 当输入框被选中时显示特定的样式, 例如边框颜色的改变.这些伪类选择器在CSS中非常常用, 可以帮助开发者根据元素的状态设置不同的样式, 从而增强用户界面的交互性和可视化效果.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Pseudo Class Selector</title><style>a:link { /*访问之前的状态*/color: red;}a:hover { /*鼠标悬浮态*/color: green;}a:active { /*激活态 鼠标点击不松开态*/color: blue;}a:visited { /*访问之后的状态*/color: dimgrey;}p:hover {color: hotpink;}input:focus { /* input框获取焦点（光标在输入框内）*/background-color: greenyellow;}</style>
</head>
<body>
<!-- a标签为链接标签 -->
<a href="https://www.jd.com"> 在不在 </a>
<p>效果展示</p>
姓名:<input type="text">
</body>
</html>
2.7 伪元素选择器
伪元素选择器(Pseudo Element Selector): 用于选择元素的特定部分或添加额外的内容. 下面是对每个选择器的简要说明(这些选择器以冒号开头):
* 1. ':first-letter': 选择器作用于文本的第一个字母或字符, 可以用来改变其样式.例如, 可以通过设置'font-size'来改变首字母的大小.* 2. ':before': 选择器用于在元素的内容之前插入内容.通过设置'content'属性可以添加文本或其他样式, 如图标或装饰符号.* 3. ':after': 选择器用于在元素的内容之后插入内容.同样地, 可以使用'content'属性来添加文本或其他样式.
* ':before'和':after'伪元素通常被用来解决父元素塌陷问题和清除浮动的影响.这些伪元素选择器通常用来装饰文本或添加额外的装饰效果, 而不需要通过修改实际的HTML结构来实现.
比如可以使用':before'和':after'选择器配合'content'属性来添加引号, 图标或其他装饰符号.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>pseudo element selector</title><style>p:first-letter {font-size: 22px; /*设置字体大小 22像素*/color: red;}p:before {content: '我自问:'; /*在文本开头插入文本内容，鼠标无法选中*/color: blue;}p:after {content: '学个屁, 睡觉! 明天再说！';color: darkgray;}</style>
</head>
<body>
<p>今天学习了吗?</p>
</body>
</html>
相关文章：
21.0 CSS 介绍
1. CSS层叠样式表 1.1 CSS简介 CSS(层叠样式表): 是一种用于描述网页上元素外观和布局的样式标记语言. 它可以与HTML结合使用, 通过为HTML元素添加样式来改变其外观. CSS使用选择器来选择需要应用样式的元素, 并使用属性-值对来定义这些样式.1.2 CSS版本 CSS有多个版本, 每个…...
下一代计算：嵌入AI的云/雾/边缘/量子计算
计算系统在过去几十年中推动了计算机科学的发展，现在已成为企业世界的核心，提供基于云计算、雾计算、边缘计算、无服务器计算和量子计算的服务。现代计算系统解决了现实世界中许多需要低延迟和低响应时间的问题。这有助于全球各地的青年才俊创办初创企业…...
Gitlab-第四天-CD到k8s集群的坑
一、.gitlab-ci.yml #CD到k8s集群的 stages: - deploy-test build-image-deploy-test: stage: deploy-test image: bitnami/kubectl:latest # 使用一个包含 kubectl 工具的镜像 tags: - k8s script: - ls -al - kubectl apply -f deployment.yaml # 根据实际情况替换…...
【Java基础】Java对象的生命周期
【Java基础】Java对象的生命周期 一、概述 一个类通过编译器将一个Java文件编译为Class字节码文件，然后通过JVM中的解释器编译成不同操作系统的机器码。虽然操作系统不同，但是基于解释器的虚拟机是相同的。java类的生命周期就是指一个class文件加载到类…...
【每日一题】88. 合并两个有序数组
【每日一题】88. 合并两个有序数组 88. 合并两个有序数组题目描述解题思路 88. 合并两个有序数组 题目描述 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2，另有两个整数 m 和 n ，分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 …...
Navicat Premium连接sqlserve数据库失败？你需要注意这几点看看配置对了么？
新建数据库连接的时候这么填的信息 报错 原因1：sqlserver数据库的端口和IP地址之间不是：连接而是用，连接 改成如下样式用逗号连接端口和IP地址就好了 原因2：在Navicat Premium中需要安装一个sqlserver的插件 找到安装路径的根目…...
207、仿真-51单片机脉搏心率与血氧报警Proteus仿真设计(程序+Proteus仿真+配套资料等)
毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、程序源码 资料包括： 需要完整的资料可以点击下面的名片加下我，找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&a…...
flutter 初识（开发体验，优缺点）
前言 最近有个跨平台桌面应用的需求，需要支持 windows/linux/mac 系统，要做个更新应用的小界面，主要功能就是下载更新文件并在本地进行替换，很简单的小功能。 花了几分钟构建没做 UI 优化的示例界面： 由于我们的客…...
校验vue prop的几种方式
校验vue prop的几种方式 vue 要求将传递给组件的任何数据显式声明为 props。此外，它还提供了强大的内置机制来验证该数据。这充当组件和父级组件之间的约定，并确保组件能按预期使用。 让我们看看怎么对props进行校验。它可以帮助我们在开发和调试过程中…...
vue+springboot 前后端分离 上传文件处理后再下载，并且传递参数
vue代码 <template><div><input type"file" ref"fileInput" accept".json"/><el-button click"upload">上传</el-button></div> </template><script> export default {name: "…...
【Linux操作系统】举例解释Linux系统编程中文件io常用的函数
在Linux系统编程中，文件IO操作是非常常见和重要的操作之一。通过文件IO操作，我们可以打开、读取、写入和关闭文件，对文件进行定位、复制、删除和重命名等操作。本篇博客将介绍一些常用的文件IO操作函数。 文章目录 1. open()1.1 原型、参数及…...
Ubuntu和centos版本有哪些区别
Ubuntu和CentOS是两个非常流行的Linux发行版，它们在一些方面有一些区别，如下所示： CentOS的版本发布周期相对较长，主要是因为它是基于RedHatEnterpriseLinux(RHEL)的。这意味着在RHEL发布后才能推出对应的CentOS版本。而Ubuntu则在…...
Netty：ChannelHandler抛出异常，对应的channel被关闭
说明 使用Netty框架构建的socket服务端在处理客户端请求时，每接到一个客户端的连接请求，服务端会分配一个channel处理跟该客户端的交互。如果处理该channel数据的ChannelHandler抛出异常没有捕获，那么该channel会关闭。但服务端和其它客户端…...
pytest结合 allure 打标记之的详细使用
前言 前面我们提到使用allure 可以生成漂亮的测试报告，下面就Allure 标记我们做详细介绍。 allure 标记 包含：epic，feature, story, title, testcase, issue, description, step, serverity, link, attachment 常用的标记 allure.feature…...
【linux】2 软件管理器yum和编辑器vim
目录 1. linux软件包管理器yum 1.1 什么是软件包 1.2 关于rzsz 1.3 注意事项 1.4 查看软件包 1.5 如何安装、卸载软件 1.6 centos 7设置成国内yum源 2. linux开发工具-Linux编辑器-vim使用 2.1 vim的基本概念 2.2 vim的基本操作 2.3 vim正常模式命令集 2.4 vim末行…...
Angular中的ActivatedRoute和Router
Angular中的ActivatedRoute和Router解释 在Angular中，ActivatedRoute和Router是两个核心的路由服务。他们都提供可以用来检查和操作当前页面路由信息的方法和属性。 ActivatedRoute ActivatedRoute是一个保存关于当前路由状态（如路由参数、查询参数以…...
Layui精简版，快速入门
目录 LayUI之入门 1.什么是layui 2.layui入门 3.自定义模块 4.用户登录 5.主页搭建 LayUI之动态树 main.jsp main.js LayUI之动态选项卡 1.选项卡 main.jsp main.js 2.用户登录 User.java UserDao.java UserAction.java R.java LayUI之用户管理 1.用户查询…...
SSH远程Ubuntu教程
SSH远程Ubuntu教程 目录 什么是SSH？SSH的优点在Ubuntu上启用SSH服务连接到远程Ubuntu服务器SSH的常用命令 1. 什么是SSH？ SSH（Secure Shell）是一种网络协议，用于在不安全的网络中安全地远程登录和执行命令。它使用…...
NPM与外部服务的集成（下）
目录 1、撤消访问令牌 2、在CI/CD工作流中使用私有包 2.1 创建新的访问令牌 持续整合 持续部署 交互式工作流 CIDR白名单 2.2 将令牌设置为CI/CD服务器上的环境变量 2.3 创建并签入特定于项目的.npmrc文件 2.4 令牌安全 3、Docker和私有模块 3.1 背景：运…...
Flask Web开发实战（狼书）| 笔记第1、2章
前言 2023-8-11 以前对网站开发萌生了想法，又有些急于求成，在B站照着视频敲了一个基于flask的博客系统。但对于程序的代码难免有些囫囵吞枣，存在许多模糊或不太理解的地方，只会照葫芦画瓢。 而当自己想开发一个什么网站的时&…...
PHP利用PCRE回溯次数限制绕过某些安全限制实战案例
目录 一、正则表达式概述 有限状态自动机 匹配输入的过程分别是： DFA（确定性有限状态自动机） NFA（非确定性有限状态自动机） 二、回溯的过程 三、 PHP 的 pcre.backtrack_limit 限制利用 例题一 回溯绕过步骤 &…...
读书笔记 |【项目思维与管理】➾ 顺势而动
读书笔记 |【项目思维与管理】➾ 顺势而动 一、企业步入“终结者时代”二、过去成功的经验也许是最可怕的三、做好非重复性的事四、适应客户是出发点五、向知识型企业转变六、速度是决胜条件 💖The Begin💖点点关注，收藏不迷路💖 …...
开发利器：接口代理和接口模拟工具
前端开发过程往往需要和后端对接接口，而且一般开发都是前后端同步开发，这就难免出现接口提供滞后的问题，从而导致我们前端开发 UI 开发完成而无法调试的问题。面对这种问题，一般我们会有很多种方式处理，比如在代码中写一些模拟数据，或者打断点调试，或者用代理工具 Fidde…...
MAVEN利器：一文带你了解MAVEN以及如何配置
前言： 强大的构建工具——Maven。作为Java生态系统中的重要组成部分，Maven为开发人员提供了一种简单而高效的方式来构建、管理和发布Java项目。无论是小型项目还是大型企业级应用，Maven都能帮助开发人员轻松处理依赖管理、编译、测试和部署等…...
解决 adb install 错误INSTALL_FAILED_UPDATE_INCOMPATIBLE
最近给游戏出包，平台要求 v1 签名吧，AS 打包后，adb 执行安装到手机，我用的设备是google pixel6 , android 系统 13， 提示如下： adb install -r v5_android_202308161046.apk Performing Streamed Install a…...
学习Vue：Event Bus 与 Provide/Inject
在Vue.js中，兄弟组件通信是指两个没有直接父子关系的组件之间如何进行数据传递和通信。为了实现兄弟组件通信，我们可以借助Vue的一些特性，如Event Bus和Provide/Inject。让我们一起来深入了解这些方法，并通过实例来看看如何实现兄…...
Java 工具类之JSON key根据ASCII排序
Java按键值字典序排列 参数按照KEY值进行字典序排序(按照KEY值的ASCII码从小到大),并用&作为各参数之间的分隔符将参数拼接成字符串。这里用到了SortedMap，复制以下代码开箱即用~ /*** getSortedString 对参数按照Key进行ASCII排序* param jsonObject 请求参数…...
深兰科技提出新多模态谣言监测模型，刷新世界纪录
近日，深兰科技旗下深兰科技科学院投稿的《基于二部特定事件树的分层表示的谣言检测》(Rumor Detection With Hierarchical Representation on Bipartite Ad Hoc Event Trees)研究论文被全球人工智能领域*期刊《IEEE Transactions on Neural Networks and Learning S…...
)
【从零学习python 】33.装饰器的作用(二)
文章目录 再议装饰器4. 装饰器(decorator)功能5. 装饰器示例例1:无参数的函数例2:被装饰的函数有参数例3:被装饰的函数有不定长参数例4:装饰器中的return例5:装饰器带参数 进阶案例 再议装饰器 # 定义函数：完成包裹数据 def makeBold(fn):def wrapped():return &qu…...
【自动电压调节器】无功功率控制的终端电压控制研究（Simulink）
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势：🌞🌞🌞博客内容尽量做到思维缜密，逻辑清晰，为了方便读者。 ⛳️座右铭&a…...