选择器进阶

目录

前言:

1.复习:

1.1浮动（float）

1.1.1浮动目的：

1.1.2脱离文档流：

1.1.3边界行为：

1.1.4清除浮动：

1.2定位（position）:

1.2.1绝对定位（absolute）:

1.2.1.1基于父级定位：

1.2.1.2位置设置：

1.2.2相对定位（relative）:

1.2.2.1基于自身原位置移动：

1.2.2.2不影响其他元素布局：

1.3父相子绝技巧（父元素相对定位，子元素绝对定位）:

1.4z-index属性:

2.基础选择器:

2.1 通配符选择器 (*):

2.1.1用于选择页面上的所有元素。

2.1.2示例：

2.2 类选择器 (.class名):

2.2.1用于选择带有指定类名的所有元素。

2.2.2示例：

2.3ID选择器 (#id名):

2.3.1用于选择具有指定ID的单个元素。

2.3.2示例：

2.4标签选择器 (标签名):

2.4.1用于选择页面上的所有指定类型的标签元素。

2.4.2示例：

 3.进阶选择器:

3.1并集选择器 (.):

3.1.1允许同时选择多个选择器，并对它们应用相同的样式。

3.1.2示例：

3.2后代选择器 (空格):

3.2.1用于选择特定元素内部的后代元素，无论它们在DOM树中的层级如何。

3.2.2示例：

3.3子代选择器 (>):

3.3.1用于选择特定元素的直接子元素。

3.3.2示例：

4.伪元素选择器:

4.1.::before:

4.1.1用于在元素的内容之前插入内容。

4.1.2示例：

4.2::after:

4.2.1.用于在元素的内容之后插入内容。

4.2.2示例：

4.3  注意事项:

 5.结构伪类选择器:

5.1:nth-child(n):

5.1.1.使用方法:

5.1.2示例：

5.1.3.注意：

5.2:first-child:

5.2.1用于选择属于其父元素的第一个子元素。这实际上是:nth-child(1)的简写形式。

5.2.2示例：

5.3 :last-child:

6. form的属性:

6.1

 属性:

6.1.1action:

6.1.2method:

前言:

前面我们提到过选择器,但是由于没有仔细去讲清楚,今天我们就来学习一下关于选择器的进阶操作,以下内容都是个人的一个学习的成果,内容都来源于网络,希望大家和谐讨论,也欢迎大家指正我的文章,欢迎在评论区讨论.也可以留言

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:

重置按钮，用于清除表单中的所有输入字段。

 结语:

今天我们学习了关于选择器进阶和复习了一下前面的内容,关于这些前端的内容都是我个人学习的成果,主要内容都是来源于网络,可能我的文章还有那里还不是很好,欢迎大家的指正,也欢迎大家在评论区和谐讨论.你们的鼓励是我最大的动力。希望大家多多支持一下。