21.0 CSS 介绍

image-20230815203320092

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>

image-20230809215340909

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>

image-20230809220637219

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>

image-20230809221229215

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>

image-20230810102904404

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>

image-20230811083017947

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>

image-20230811083810542

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>

image-20230814194122586

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>

image-20230814202719188

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>

image-20230815062214818

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>

image-20230815062306496

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>

image-20230815062553627

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>

image-20230815065358442

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>

image-20230815140544786

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>

image-20230815143800190

<!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>

image-20230815144235177

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>

image-20230815153225888

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>

image-20230815155158264

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>

image-20230815184734271

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>

image-20230815170759696

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>

image-20230815190109456

<!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>

image-20230815190353593

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>

image-20230815191911674

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>

image-20230815192334971

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>

image-20230815194528438

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>

image-20230815195126695

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>

image-20230815195634840

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>

image-20230815200236244

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>

image-20230815200352021

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>

GIF 2023-8-15 20-12-20

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>

image-20230815202104438

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

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

相关文章

AI 绘画Stable Diffusion 研究（十一）sd图生图功能详解-美女换装

AI 绘画Stable Diffusion 研究（十一）sd图生图功能详解-美女换装

免责声明: 本案例所用安装包免费提供&#xff0c;无任何盈利目的。 大家好&#xff0c;我是风雨无阻。 为了让大家更直观的了解图生图功能&#xff0c;明白图生图功能到底是干嘛的&#xff0c;能做什么事情&#xff1f;今天我们继续介绍图生图的实用案例-美女换装的制作。 对于…
阅读更多...
ComPDFKit PDF SDK for Windows Crack

ComPDFKit PDF SDK for Windows Crack

ComPDFKit PDF SDK for Windows Crack 添加了在创建文本框时调整默认属性的支持。 增加了对调整PDF大小时调整宽度的支持。 添加了对编辑文本时更多快捷方式的支持。 优化了文本输入&#xff0c;并将字体样式与原始文本相匹配。 在内容编辑器模式下复制和粘贴时优化了UI交互。 …
阅读更多...
用于弥散加权MRI的关节各向异性维纳滤光片研究（Matlab代码实现）

用于弥散加权MRI的关节各向异性维纳滤光片研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
三款远程控制软件对比，5大挑选指标：安全、稳定、易用、兼容、功能

三款远程控制软件对比，5大挑选指标：安全、稳定、易用、兼容、功能

陈老老老板&#x1f934; &#x1f9d9;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f9d9;‍♂️本文简述&#xff1a;三款远程控制软件对比&#xff0c;5大挑选指标&#xff1…
阅读更多...
spring如何进行依赖注入，通过set方法把Dao注入到serves

spring如何进行依赖注入，通过set方法把Dao注入到serves

1、选择Generate右键鼠标 你在service层后面方法的这些: 2、UserService配置文件的写法是怎样的&#xff1a; 3、我们在UserController中执行一下具体写法&#xff1a; 最后我们执行一下 &#xff1a; 4、这里可能出现空指针&#xff0c;因为你当前web层,因为你new这个对象根…
阅读更多...
示例1：FreeRTOS移植详解_基于HAL库工程

示例1：FreeRTOS移植详解_基于HAL库工程

1、开发环境 (1)Keil MDK: V5.38.0.0 (2)STM32CubeMX: V6.8.1 (3)MCU: STM32F103C8(F1系列软仿真最方便) (4)ARM编译器&#xff1a;V5(使用V6编译会报错) 2、移植准备工作 (1)用于移植FreeRTOS的基础工程。 时钟已配置好串口已配置好printf已经重定向到串口1 (2)FreeRT…
阅读更多...
Android性能优化----执行时间优化

Android性能优化----执行时间优化

作者&#xff1a;lu人皆知 在APP做启动优化时&#xff0c;Application会做一些初始化的工作&#xff0c;但不要在Application中做耗时操作&#xff0c;然而有些初始化工作可能是很耗时的&#xff0c;那怎么办&#xff1f;初始化操作可以开启子线程来完成。 计算执行时间 常规…
阅读更多...
MySQL的select ... where ...会加锁吗？

MySQL的select ... where ...会加锁吗？

先说答案&#xff1a;不会。但select … where … lock in share mode会加锁。实验如下。 存储引擎innodb&#xff0c;MySQL版本5.7。 1&#xff1a;select … where … 如下图&#xff1a; 1&#xff1a;select … where … lock in share mode 如下图&#xff1a; 接着我…
阅读更多...
【SpringCloud】SpringCloudAlibaba官网资料

【SpringCloud】SpringCloudAlibaba官网资料

出现原因 Spring Cloud Netflix Projects Entering Maintenance Mode 官网 博客 https://github.com/alibaba/spring-cloud-alibaba/blob/master/README-zh.md官网 https://spring.io/projects/spring-cloud-alibaba#overview英文 https://github.com/alibaba/spring-cloud-…
阅读更多...
五种消息模型简单说明

五种消息模型简单说明

五种消息模型简单说明 RabbitMQ提供了6种消息模型&#xff0c;但是第6种其实是RPC&#xff0c;并不是MQ&#xff0c;因此不予学习。那么也就剩下5种。但是其实3、4、5这三种都属于订阅模型&#xff0c;只不过进行路由的方式不同。  我们通过一个demo工程来了解下RabbitMQ的…
阅读更多...
pytest自动化框架运行全局配置文件pytest.ini

pytest自动化框架运行全局配置文件pytest.ini

还记得在之前的篇章中有讲到Pytest是目前主要流行的自动化框架之一&#xff0c;他有基础的脚本编码规则以及两种运行方式。 pytest的基础编码规则是可以进行修改&#xff0c;这就是今日文章重点。 看到这大家心中是否提出了两个问题&#xff1a;pytest的基础编码规则在哪可以…
阅读更多...
【算法C++实现】5、二叉树

【算法C++实现】5、二叉树

二叉树节点结构体 class Node { public:int val;Node* left;Node* right;Node(int a) : val(a), left(nullptr), right(nullptr) {}Node(int a, Node* l, Node* r): val(a), left(l), right(r) {}}1、递归遍历 递归遍历二叉树&#xff0c;每个节点的遍历顺序叫递归序&#xf…
阅读更多...
软件工程模型-架构师之路（四）

软件工程模型-架构师之路（四）

软件工程模型 敏捷开发&#xff1a; 个体和交互 胜过 过程和工具、可以工作的软件 胜过 面面俱到的文件、客户合作胜过合同谈判、响应变化 胜过 循序计划。&#xff08;适应需求变化&#xff0c;积极响应&#xff09; 敏捷开发与其他结构化方法区别特点&#xff1a;面向人的…
阅读更多...
代码随想录第27天|39. 组合总和，40.组合总和II，131.分割回文串

代码随想录第27天|39. 组合总和，40.组合总和II，131.分割回文串

39. 组合总和 分析这道题的搜索过程如下&#xff1a; 因为这道题没有限制要搜索几层&#xff0c;所以可以一直搜索直到sumtarget或者sum>target就return 回溯三部曲 1.递归函数参数 本题还需要startIndex来控制for循环的起始位置&#xff0c;对于组合问题&#xff0c;什么…
阅读更多...
2023/8/21 - Fear of failure is more terrifying than failure itself

2023/8/21 - Fear of failure is more terrifying than failure itself

阅读更多...
P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布

P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布

[NOIP2014 提高组] 生活大爆炸版石头剪刀布 题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头。如果两个人出拳一样&#xff0c;则不分胜负。在《生活大爆炸》第二季第 8 集中出现了一种石头剪刀布的升级版游戏。 升级版游戏在传统的石头剪刀布游戏的基础…
阅读更多...
在ARM服务器上一键安装Proxmox VE(以在Oracle Cloud VPS上为例)(甲骨文)

在ARM服务器上一键安装Proxmox VE(以在Oracle Cloud VPS上为例)(甲骨文)

前言 如题&#xff0c;具体用到的说明文档如下 virt.spiritlhl.net 具体流程 首先是按照说明&#xff0c;先得看看自己的服务器符不符合安装 Proxmox VE的条件 https://virt.spiritlhl.net/guide/pve_precheck.html#%E5%90%84%E7%A7%8D%E8%A6%81%E6%B1%82 有提到硬件和软…
阅读更多...
CSS 选择器

CSS 选择器

前言 基础选择器 以下是几种常见的基础选择器。 标签选择器&#xff1a;通过HTML标签名称选择元素。 例如&#xff1a; p {color: red; } 上述样式规则将选择所有<p>标签 &#xff0c;并将其文字颜色设置为红色。 类选择器&#xff1a;通过类名选择元素。使用类选择…
阅读更多...
课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

课程项目设计--spring security--用户管理功能--宿舍管理系统--springboot后端

写在前面&#xff1a; 还要实习&#xff0c;每次时间好少呀&#xff0c;进度会比较慢一点 本文主要实现是用户管理相关功能。 前文项目建立 文章目录 验证码功能验证码配置验证码生成工具类添加依赖功能测试编写controller接口启动项目 security配置拦截器配置验证码拦截器 …
阅读更多...
电脑上安装，多版本node

电脑上安装，多版本node

手上有一个vue3的项目&#xff0c;sass配置如下图所示&#xff1a; 安装了Python3.10和node 16.14.0&#xff0c;项目能正常install 跟run。 因工作需要&#xff0c;收上有一个vue2的项目&#xff0c;sass配置如下图所示&#xff1a; 执行npm intsall 的时候一直报Python2找不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023