目录
3.2.1用于选择特定元素内部的后代元素,无论它们在DOM树中的层级如何。
5.2.1用于选择属于其父元素的第一个子元素。这实际上是:nth-child(1)的简写形式。
前言:
前面我们提到过选择器,但是由于没有仔细去讲清楚,今天我们就来学习一下关于选择器的进阶操作,以下内容都是个人的一个学习的成果,内容都来源于网络,希望大家和谐讨论,也欢迎大家指正我的文章,欢迎在评论区讨论.也可以留言
1.复习:
在学习新知识之前让我们先复习一下前面我们学习的内容:
1.1浮动(float)
1.1.1浮动目的:
浮动最初是为了实现文本环绕图片的效果而设计的,但后来被广泛用于布局。
1.1.2脱离文档流:
当元素设置为浮动时,它会脱离其正常的文档流位置,但仍然会占据空间,并影响后续元素的布局。
1.1.3边界行为:
浮动元素会一直向左或向右浮动,直到它遇到父元素的边界或其他浮动元素为止。
1.1.4清除浮动:
为了解决父元素高度塌陷的问题,经常需要使用清除浮动的技巧,例如使用伪元素(::after
)并应用clear: both;
样式。
1.2定位(position):
1.2.1绝对定位(absolute):
1.2.1.1基于父级定位:
绝对定位的元素会脱离正常的文档流,并且相对于其最近的已定位祖先元素进行定位。
1.2.1.2位置设置:
可以使用top
、right
、bottom
和left
属性来指定元素在父级元素内的具体位置。
1.2.2相对定位(relative):
1.2.2.1基于自身原位置移动:
相对定位的元素仍然保持在文档流中的位置,只是相对于其原始位置进行移动。
1.2.2.2不影响其他元素布局:
其他元素不会填补相对定位元素移动后留下的空间。
1.3父相子绝技巧(父元素相对定位,子元素绝对定位):
当父元素设置为相对定位时,子元素可以设置为绝对定位,并且会相对于父元素进行定位。
这种技巧在实现一些需要精确控制的布局时非常有用,比如模态框、下拉菜单等。
子元素会根据父元素的位置和大小来调整自己的位置,即使父元素移动或改变大小,子元素也会相应地调整位置。
1.4z-index属性:
当元素在页面上重叠时,z-index
属性用于控制它们的堆叠顺序(即哪个元素应该位于其他元素的上方或下方)。
z-index
值较高的元素会覆盖值较低的元素。如果两个元素的z-index
值相同,则它们在HTML代码中的顺序将决定哪个元素在前(后出现的元素会覆盖先出现的元素)。
需要注意的是,z-index
属性只对设置了定位(即position
属性不为static
)的元素有效。同时,该属性的值可以是正数、负数或零。在大多数情况下,通过合理地使用position
和z-index
属性,就可以实现所需的页面布局和元素堆叠效果。
2.基础选择器:
2.1 通配符选择器 (*
):
2.1.1用于选择页面上的所有元素。
2.1.2示例:
* { margin: 0; padding: 0; }(常用于重置浏览器默认样式)
2.2 类选择器 (.class名):
2.2.1用于选择带有指定类名的所有元素。
2.2.2示例:
.myClass { color: red; }(选择类名为myClass的所有元素,并将其文本颜色设置为红色)
2.3ID选择器 (#id名
):
2.3.1用于选择具有指定ID的单个元素。
2.3.2示例:
#myID { font-size: 20px; }(选择ID为myID的元素,并设置其字体大小为20像素)
2.4标签选择器 (标签名
):
2.4.1用于选择页面上的所有指定类型的标签元素。
2.4.2示例:
p { text-align: center; }(选择所有<p>元素,并将其文本居中对齐)
3.进阶选择器:
3.1并集选择器 (.
):
3.1.1允许同时选择多个选择器,并对它们应用相同的样式。
3.1.2示例:
h1, h2, h3 { color: blue; }(选择所有<h1>、<h2>和<h3>元素,并将它们的文本色设置为蓝色
3.2后代选择器 (空格):
3.2.1用于选择特定元素内部的后代元素,无论它们在DOM树中的层级如何。
3.2.2示例:
.box p { color: green; }(选择.box类内部的所有<p>元素,并将它们的文本颜色设置为绿色)
3.3子代选择器 (>
):
3.3.1用于选择特定元素的直接子元素。
3.3.2示例:
.box > p { border: 1px solid black; }(仅选择.box类的直接子元素<p>,并为它们添加1像素的黑色边框)
4.伪元素选择器:
4.1.::before:
4.1.1用于在元素的内容之前插入内容。
4.1.2示例:
p::before { content: "Read this: "; }(在每个<p>元素的内容前插入“Read this: ”)
4.2::after:
4.2.1.用于在元素的内容之后插入内容。
4.2.2示例:
p::after { content: " [End of paragraph]"; }(在每个<p>元素的内容后插入“[End of paragraph]”)
4.3 注意事项:
content
属性是必需的,用于指定要插入的内容。如果省略,伪元素将不会被生成。
伪元素的内容是不可选择的,也不存在于实际的DOM中,因此它们不能被JavaScript直接操作或通过用户交互(如复制粘贴)来访问。
伪元素通常用于装饰目的,如添加图标、分隔线或额外的视觉元素。
5.结构伪类选择器:
5.1:nth-child(n):
5.1.1.使用方法:
用于选择属于其父元素的第n个子元素。这里的n可以是一个具体的数字,也可以是一个关键字(如odd
或even
),或者是一个公式(如2n+1
)。
5.1.2示例:
li:nth-child(3) { color: red; }(选择每个<ul>或<ol>中的第三个<li>元素,并将其文本颜色设置为红色)
5.1.3.注意:
:nth-child()
是从1开始计数的,而不是从0开始。
5.2:first-child:
5.2.1用于选择属于其父元素的第一个子元素。这实际上是:nth-child(1)
的简写形式。
5.2.2示例:
p:first-child { font-weight: bold; }(选择每个父元素中的第一个<p>元素,并将其字体加粗)
5.3 :last-child:
用于选择属于其父元素的最后一个子元素。与:first-child
相对应。
示例:
div:last-child { margin-bottom: 20px; }(选择每个父元素中的最后一个<div>元素,并为其添加20像素的底部外边距)
6. form的属性:
6.1<form>
属性:
6.1.1action
:
指定当表单提交时数据发送到的URL。这通常是服务器端脚本的地址,用于处理表单数据。
6.1.2method
:
定义数据发送到action
属性所指定URL的HTTP方法,通常是"get"或"post"。
6.2<form>
控件:
6.2.1<input>
:
最常用的表单控件,用于创建不同类型的输入字段。
6.2.2<textarea>
:
.用于多行文本输入。
6.2.3<select>
:
创建下拉菜单。
6.2.4<option>
:
定义下拉菜单中的选项。
6.2.5<button>
:
创建一个按钮,通常与JavaScript一起使用来触发特定操作。
7.<input>
类型:
7.1text
:
文本输入字段。
7.2password
:
密码输入字段,输入内容会被遮罩。
7.3checkbox
:
多选框,允许用户选择多个选项。
7.4radio
:
单选框,用户只能从同一组的多个选项中选择一个。
7.5submit
:
提交按钮,用于提交表单。
7.6file
:
文件上传控件,允许用户选择文件进行上传。
7.7reset
:
重置按钮,用于清除表单中的所有输入字段。
结语:
今天我们学习了关于选择器进阶和复习了一下前面的内容,关于这些前端的内容都是我个人学习的成果,主要内容都是来源于网络,可能我的文章还有那里还不是很好,欢迎大家的指正,也欢迎大家在评论区和谐讨论.你们的鼓励是我最大的动力。希望大家多多支持一下。