-
选择器进阶与表单表格
选择器
下面是我们之前学习过的选择器
*{}：通配符选择器，选择网页里面的所有元素 .class名{}:类选择器，选择网页里面所有带有class="xxx"的标签元素 #id名{}:id选择器，选择网页里面带有id="xxx"的标签元素 标签名{}:标签选择器，选中网页里的所有这个标签- 1
- 2
- 3
- 4
下面是选择器补充
ul,li{}:并集选择器，一次性可以选择多个目录（以逗号隔开，相当于两者都是一样的规则） .msg p{}:后代选择器，选择.msg里面的所有p标签（以空格隔开） .msg > p{}:子代选择器，选择msg里面子元素中的p标签（孙子，曾孙不选）（亲儿子元素，孙子和重孙都不归他管）- 1
- 2
- 3
并集选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practisetitle> <style> .box1,.box2{ /*并集选择器以逗号隔开*/ width: 100px; height: 100px; background-color: red; } style> head> <body> <div class="box1">div> <div class="box2">牛肉面div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
后代选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practisetitle> <style> .msg p{ /*后代选择器：选中div下的所有p标签*/ color: blue; } style> head> <body> <div class="msg"> <p>方便面p> <p>牛肉面p> <p>香辣面p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
子代选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practisetitle> <style> .msg > p{ /*子代选择器：选择类为msg的div下的所有p标签，不选类名为box下的p标签*/ color: blue; font-size: 20px; } style> head> <body> <div class="msg"> <p>方便面p> <p>牛肉面p> <div class="box"> <p>蹭面p> div> <p>香辣面p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
伪类选择器
相当于在特定情况下，给标签触发样式
元素:hover{}----->当鼠标悬停时，触发样式 元素:active{}----->当鼠标按下元素，触发样式- 1
- 2
元素:visited{}----->当a标签被访问过时，触发样式 元素:link{}----->当a标签未被访问过时，触发样式- 1
- 2
爱恨准则：先爱后恨 LOVE HATE css有个规定：四个伪类顺序必须是按照（爱恨准则）否则会有伪类不生效 link > visited > hover > active- 1
- 2
- 3
- 4
元素:focus 获得焦点 元素:checked (单选/多选)表单被勾选状态- 1
- 2
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> *{ margin: 0; padding: 0; } input,button{ outline: none;/*清除默认焦点*/ } .btn{ border: 1px solid red; } .btn:focus{ /*点击input，获取焦点*/ border: 1px solid blue; } .text{ display:none;/*在网页中不显示，也不占地方*/ background-color: red; } .btn:focus+.text{ /*相邻选择器：选中对应元素的下一个兄弟元素*/ display: block;/*显示*/ } .rad:checked{/*当表单被勾选时，宽扩大到100px，高扩大到100px*/ width: 100px; height: 100px; } style> head> <body> <input type="text" class="btn"> <p class="text">我是渣渣辉，当你获取焦点时就可以看到我p> <label for="">男<input class="rad" type="radio" name="ty">label> <label for="">女<input class="rad" type="radio" name="ty">label> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practisetitle> <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: blue; } .box:hover{ /*当鼠标悬停在box盒子上时，变为红色，盒子大小扩大1倍*/ width: 200px; height: 200px; background-color: red; } style> head> <body> <div class="box">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Practisetitle> <style> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: blue; } .box:hover{ /*当鼠标悬停在box盒子上时，变为红色，盒子大小扩大1倍*/ width: 200px; height: 200px; background-color: red; } .box:active{ /*当鼠标按下时，盒子变为黄色*/ background-color: yellow; } style> head> <body> <div class="box">div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
伪元素选择器
相当于创建一个虚拟元素
元素:before{content:'内容'}---->在元素前面添加一个子元素 元素:after{content:'内容'}---->在元素后面添加一个子元素 注：必须拥有content属性样式，上述两个伪元素才会被激活 作用体现在：如果你希望网页里的部分内容（文字/图片）不能被选中或下载就使用伪元素。 1.性能更好：伪元素并不是真实存在的，只能看不能用，不能被选中，所以减少了交互需求，性能更好 2.安全性更好：只能看不能用，不能取用内容 3.伪元素可以用css创建元素，而不需要html标签，简化了html结构- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .box::before{ content: '我爱吃'; } .box::after{ content: '麦当'; } style> head> <body> <span class="box">QQ糖span> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
结构选择器
元素:nth-child(下标){}--->根据下标指定元素，数据从1开始计算 元素:nth-last-child(下标){}--->根据下标指定元素，数据从最后开始计算- 1
- 2
元素:first-child{}--->选中第一个子元素 元素:last-child{}--->选中最后一个子元素- 1
- 2
元素:nth-of-type(下标){}--->根据下标指定元素(优先指定类型，忽略其他的类型) 元素:nth-last-of-type(下标){}--->根据下标指定元素(优先指定类型，忽略其他的类型)- 1
- 2
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> .box:nth-last-child(1){ color: red; } .box:nth-child(1){ color: blue; } style> head> <body> <div> <p class="box">语文p> <p class="box">数学p> <p class="box">英语p> <p class="box">化学p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
属性选择器
元素[属性名]{}--->包含有指定属性名的元素 元素[属性名=值]{}--->属性名的值为指定值的元素 元素[属性名*=值]{}--->属性名的值包含指定值的元素 元素[属性名^=值]{}--->属性名的值以指定值开头的元素 元素[属性名$=值]{}--->属性名的值以指定值结尾的元素- 1
- 2
- 3
- 4
- 5
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> div p[class='box1']{ color: red; } div p[class$='4']{ /*以4结尾的属性值*/ color: blue; } style> head> <body> <div> <p class="box1">语文p> <p class="box2">数学p> <p class="box3">英语p> <p class="box4">化学p> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
相邻选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> *{ margin: 0; padding: 0; } input,button{ outline: none;/*清除默认焦点*/ } .btn{ border: 1px solid red; } .btn:focus{ /*点击input，获取焦点*/ border: 1px solid blue; } .text{ display:none;/*在网页中不显示，也不占地方*/ background-color: red; } .btn:focus+.text{ /*相邻选择器：选中对应元素的下一个兄弟元素*/ display: block;/*显示*/ } style> head> <body> <input type="text" class="btn"> <p class="text">我是渣渣辉，当你获取焦点时就可以看到我p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
表单（form）
提供一个让用户进行交互的窗口（输入框，选择框，提交按钮）
form属性： action=数据提交的位置（要把数据提交到后台/数据库） method=数据提交方式 https请求格式:(get/post)默认是get（get只是拿数据只能看，post拿数据的同时传一些数据） form功能控件（标签）（form标签中的标签） input--->输入框（行内元素标签） textarea--->多行输入框（都可以设置输入提醒属性：placeholder）（行内元素标签） label--->为表单中的各个控件定义标题（通常使用在表单内 他通常关联一个控件）（行内元素标签） select--->下拉菜单（行内元素标签） option--->下拉菜单里的选项 button--->按钮，一般是结合js做操作（行内元素标签） input属性 type--->输入类型 placeholder--->文本框提示语 input类型type text--->文本框 password--->密码框 checkbox--->多选框 radio--->单选框，基于name判断 submit--->提交按钮 file--->文件上传 url--->输入网址 reset--->重置表达内容 value：设置控件值 name：设置控件名- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> head> <body> <form action=""> 姓名<input type="text" placeholder="请输入姓名"> <textarea name="" id="" cols="30" rows="10" placeholder="请输入兴趣">textarea> <select name="" id=""> <option value="">语文option> <option value="">数学option> <option value="">英语option> select> <button>点我起飞button> <label for="username">性别label> <input type="text" id="username"> <label for="">姓名<input type="text">label> <hr> <label for="">请输入密码<input type="password">label> <label for="">肉类<input type="checkbox">label> <label for="">蔬菜<input type="checkbox">label> <br> <label for="">男<input type="radio" name="ky">label> <label for="">女<input type="radio" name="ky">label> <br> <input type="submit" value="点我"> <br> <input type="file"> <br> <input type="file" multiple> <br> <input type="reset"> <br> <label for="">网址输入框<input type="url">label> <input type="submit"> <br> <label for="">输入数字<input type="number" max="100" min="0" step="5">label> form> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
label标签
通常使用在表单内，他通常关联一个控件(form标签中的标签)
其中for属性功能表示这个label是为哪个控件服务的第一种写法- 1
- 2
第二种写法- 1
- 2
- 3
表格（table标签）
使用table标签来定义表格
注：不支持排序，求和等数学计算，只是用来展示数据表格table组成：（都是标签） table：表格标签 caption：表格标题 tr：表格的行（内容都是在行里） th：表格的头（字体会加粗，代表一列的标题，文本信息上下左右居中并且加粗） td：表格单元格（代表每一项，文本信息上下居中需要在table选择器里面加text-align: center;文本居中）- 1
- 2
- 3
- 4
- 5
- 6
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> *{ margin: 0; padding: 0; } table{ width: 500px; border: 1px solid red; text-align: center;/*内容居中*/ border-collapse: collapse;/*把表格变成单边边框线*/ } td,th{ border: 1px solid red; } .td1{ height: 100px; } .td2{ width: 400px; } style> head> <body> <table> <caption>兴趣爱好表caption> <tr> <th>姓名th> <th>年龄th> <th>爱好th> tr> <tr> <td class="td1">小川td> <td>18td> <td>干饭td> tr> <tr> <td class="td2">小明td> <td>20td> <td>足球td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
合并单元格
将水平或者垂直多个单元格合并成一个单元格 给保留的单元格设置:跨行合并(rowspan)或者垮列合并(colspan)- 1
- 2
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Documenttitle> <style> *{ margin: 0; padding: 0; } table{ width: 500px; border: 1px solid red; text-align: center;/*内容居中*/ border-collapse: collapse;/*把表格变成单边边框线*/ } td,th{ border: 1px solid red; } style> head> <body> <table> <caption>兴趣爱好表caption> <tr> <th>姓名th> <th>年龄th> <th>爱好th> tr> <tr> <td>小川td> <td rowspan="2">18td> <td>干饭td> tr> <tr> <td colspan="3">小明td> <td>20td> <td>足球td> tr> table> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
-
相关阅读:
计算机毕业设计Python+Django的银行取号排队系统
【SQL引擎 - analyze.cpp分析(二)】
【20221204】【每日一题】监控二叉树
Kakao Brain 的开源 ViT、ALIGN 和 COYO 文字-图片数据集
SQL行列转换
2022年全网最全最细最流行的自动化测试工具有哪些？
【http协议】Content-Type 超详细介绍
【SSL】用Certbot生成免费HTTPS证书
【目标检测算法】YOLO-V1~V3原理梳理
博客园商业化之路-众包平台：500位驭码好汉，等你来发单挑战
- 原文地址：https://blog.csdn.net/huaz_md/article/details/132824239
